カテゴリー: 備忘録

はじめに

Image Compare Viewerは、ビフォーアフターの画像比較を簡単に実装できる便利なライブラリです。しかし、iOSデバイスで使用する際に特有のバグが発生することがあります。

解決方法

バージョン1.5への ダウングレード

最も確実な解決方法は、Image Compare Viewerのバージョンを1.5に戻すことです。

npm install img-comparison-slider@1.5.0

Web開発において、要素の位置調整は頻繁に行う作業の一つです。特に中央寄せは多くの場面で必要となりますが、transform: translate()の使い方によって結果が大きく変わります。

今回は、transform: translate(-50%, -50%);、transform: translate(-50%);、そしてtransform: translateX(-50%);の違いについて詳しく解説します。

基本的な違い

transform: translate(-50%, -50%);

• X軸（水平方向）：-50%移動
• Y軸（垂直方向）：-50%移動
• 効果：要素を左に50%、上に50%移動

transform: translate(-50%);

• X軸（水平方向）：-50%移動
• Y軸（垂直方向）：移動なし（0%）
• 効果：要素を左に50%のみ移動

transform: translateX(-50%);

• X軸（水平方向）：-50%移動
• Y軸（垂直方向）：移動なし
• 効果：要素を左に50%のみ移動

translate(-50%)とtranslateX(-50%)の関係

実は、translate(-50%)とtranslateX(-50%)は全く同じ結果になります。

/* これらは同じ効果 */
.method1 { transform: translate(-50%); }
.method2 { transform: translateX(-50%); }

違いは記述の意図の明確性にあります：

• translate(-50%)：汎用的な書き方
• translateX(-50%)：X軸のみの移動であることを明示

実際の使用例

完全な中央寄せ

.center-both {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

この方法は、要素を画面の完全な中央に配置したい場合に使用します。モーダルウィンドウやローディング画面などでよく見られるパターンです。

水平方向のみの中央寄せ（2つの書き方）

/* 方法1: translate()を使用 */
.center-horizontal-1 {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

/* 方法2: translateX()を使用 */
.center-horizontal-2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

どちらも同じ効果ですが、translateX()を使うことで「X軸のみの移動」という意図が明確になります。

どちらを使うべき？

translate(-50%)を選ぶ場合

• 汎用性重視：後でY軸の移動も追加する可能性がある
• シンプルさ重視：短く書きたい
• 既存コードとの統一：プロジェクト内で統一されている

translateX(-50%)を選ぶ場合

• 明確性重視：X軸のみの移動であることを明示したい
• 保守性重視：他の開発者が見たときに意図が分かりやすい
• 複数軸の操作：X、Y軸を個別に制御したい場合

/* 個別制御の例 */
.element {
  transform: translateX(-50%) translateY(20px) rotate(45deg);
}

まとめ

効果の違い：

• translate(-50%, -50%)：完全な中央寄せが必要な場合
• translate(-50%)：水平方向のみの中央寄せが必要な場合
• translateX(-50%)：水平方向のみの中央寄せ（意図が明確）

translate(-50%)とtranslateX(-50%)の使い分け：

• 機能的には同じだが、コードの意図を明確にするならtranslateX()
• プロジェクトの統一性やチームの方針に合わせて選択

適切な使い分けにより、より柔軟で効率的なレイアウトを実現できます。特にレスポンシブデザインにおいて、この技術は非常に有用です。

モーダルのフェードイン処理で動作が重くなる問題にハマったので、解決方法を記録しておきます。

問題の概要

jQueryのfadeIn()メソッドを使ってモーダルを表示する際、CSSでtransitionプロパティを設定していると、アニメーションが二重に動作してしまい、パフォーマンスが悪化することがあります。

変更前のコード

JavaScript（jQuery）

$('.open-btn').on('click', function () {
    $('.modal').fadeIn().css('display', 'flex');
});
$('.close-btn').on('click', function () {
    $('.modal').fadeOut();
});

CSS

.modal {
    position: fixed;
    width: 100vw;
    height: 100svh;
    z-index: 999999;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: scroll;
    display: none;
    background: black;
    transition: .3s; /* ←この行が問題 */
}

問題の原因

上記のコードでは以下の問題が発生していました：

• アニメーションの競合: jQueryのfadeIn()とCSSのtransitionが同時に動作
• パフォーマンス低下: 二重のアニメーション処理による負荷増加
• 予期しない動作: 意図しないアニメーション効果の発生

解決方法

CSSのtransitionプロパティを削除するだけで解決できます。

変更後のCSS

.modal {
    position: fixed;
    width: 100vw;
    height: 100svh;
    z-index: 999999;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: scroll;
    display: none;
    background: black;
    /* transition: .3s; ←この行を削除 */
}

JavaScript（jQuery）

// 変更なし
$('.open-btn').on('click', function () {
    $('.modal').fadeIn().css('display', 'flex');
});
$('.close-btn').on('click', function () {
    $('.modal').fadeOut();
});

まとめ

jQueryのアニメーションメソッドを使用する際は、CSSのtransitionプロパティとの競合に注意が必要です。シンプルな解決策として、不要なtransitionを削除するだけで大幅にパフォーマンスが改善されることがあります。