iPhoneでimage-compare-viewerの挙動が悪い時の対処法

image-compare-viewer は、2つの画像を比較するための便利なライブラリですが、iPhoneのSafariなどでは期待通りに動作しないことがあります。本記事では、その原因と具体的な対策を紹介します。

iPhoneでの問題点

• スライダーが動かない
• タッチ操作が効かない
• スクロールと干渉する
• ズームが勝手に発生する

対策方法

1. image-compare-viewer の最新バージョンを確認

まず、ライブラリの最新版を使用しているか確認しましょう。バグ修正が行われている可能性があります。

npm update image-compare-viewer

2. pointer-events を適切に設定

iPhoneのSafariでは、pointer-events: none; の影響でタッチが効かないことがあります。CSSで適切に設定しましょう。

.image-compare-wrapper {
  touch-action: pan-y; /* 縦スクロールを有効にする */
  pointer-events: auto; /* タッチイベントを有効化 */
}

3. touch-action を修正

touch-action: none; が設定されていると、スライダーの動作が制限されることがあります。JavaScriptで修正できます。

document.querySelectorAll('.image-compare-wrapper').forEach(el => {
  el.style.touchAction = 'pan-y';
});

4. iPhoneの gesturestart を防ぐ

iPhoneでは、gesturestart イベントが発生すると意図しないズームが起こります。これを防ぐには以下のコードを追加します。

document.addEventListener('gesturestart', function(event) {
  event.preventDefault();
});

5. passive: false を設定して touchmove を適切に処理

touchmove イベントを passive: false にすることで、iPhoneのタッチ操作が改善されることがあります。

document.addEventListener('touchmove', function(event) {
  event.preventDefault();
}, { passive: false });

6. mousemove の代わりに touchmove を使用

iPhoneのSafariでは、mousemove が touchmove と競合することがあります。以下のコードで touchmove を適切に処理します。

document.querySelectorAll('.image-compare-wrapper').forEach(wrapper => {
  let slider = wrapper.querySelector('.slider');

  function moveSlider(e) {
    let rect = wrapper.getBoundingClientRect();
    let x = e.touches ? e.touches[0].clientX - rect.left : e.clientX - rect.left;
    let percent = (x / rect.width) * 100;
    percent = Math.max(0, Math.min(100, percent));
    slider.style.left = percent + '%';
  }

  wrapper.addEventListener('mousemove', moveSlider);
  wrapper.addEventListener('touchmove', moveSlider, { passive: false });
});

まとめ

iPhoneで image-compare-viewer をスムーズに動作させるには、以下の対策を試してください。

✅ 最新版にアップデート
✅ CSSの pointer-events を修正
✅ touch-action を適切に設定
✅ iPhoneの gesturestart を防ぐ
✅ passive: false を設定して touchmove を適切に処理
✅ mousemove の代わりに touchmove を使う