web codery

iOS8系(iPhoneなど)safariでペーストができないことがある

category: JavaScript

iOS8.x(8.10など)のiPhone, iPadのsafariでバグっぽい挙動を確認したので共有します。

ページ内のフォームなどに貼り付けで入力しようと、入力エリアを長押しして「ペースト」の文字が出てくるものの、すぐに消えてしまって文字の貼り付けがうまくいかないことがあります。この問題は、写真などを動かし続けているページなどで発生するようです。

このページでは、この問題の原因と回避するためにできることを、分かっている範囲で簡単に説明します。

目次

  1. 「ペースト」の文字が消える原因とweb製作者ができること
  2. ページを閲覧する人ができること

「ペースト」の文字が消える原因とweb製作者ができること

この現象が起こる条件

この現象が起こる条件は、ページ内のDOMをjQueryのanimateや、CSSのtransitionなどで動かしている場合のようです。また、jQuery/JavaScriptでは、フェードインなど透明度を変更する処理でも発生しました。具体的には、以下のような記述での動きを、setIntervalなどで連続して行った場合には動きがとまりませんので、一向に貼り付け作業ができないといった現象です。

/* JavaScriptで下のような処理を繰り返す */
$('.picture').animate({
  left: $('.picture').position().left + 50 +'px'
}, 500);

$('.picture').animate({
  opacity: $('.picture').css('opaciey') + 0.1
}, 500);

ちなみに、jQueryのanimateが原因ではないかと勘ぐって、style属性を変化させ続ける自作animateのようなものでも実験してみましたが、結果は同じでした。

CSSでは、動きをつけるようなtransitionはダメでしたが、フェードインやフェードアウトさせるだけならペーストできました。 ※以下では、「active」classをとったり付けたりをJavaScriptで繰り返すとアクションし続けます。

/* CSS transitionで動かしてみても結果は一緒 */
.item {
  position: absolute;
  left: 10%;
  -webkit-transition-duration: .5s;
}
.item.active {
  left: 70%;
}

/* opacityでフェードインなどするだけなら問題ない */
.picture {
  opacity: 0;
  -webkit-transition-duration: .5s;
}
.picture.active {
  opacity: 100%;
}

分かっていること

  • ・ページ内のオブジェクトの位置を動かすと発生
  • ・JavaScriptでstyle属性を変化させるのがダメぽい
  • ・CSSで変化させる場合は、位置を動かさなければ大丈夫ぽい
  • ・iOS8系の端末で発生した
  • ・iOS7系を含むその他の環境では、この問題の発生は確認できていない

対策

フォームパーツがありタッチデバイスでの閲覧が想定されるページでは、フェードインなどはCSSで実現し、ページ内の要素を動かし続けなくても同じような効果がえられることは、要素を動かす以外の方法で実現する、といったところになりそうです。

発生環境などが限定されていますから、ほとんどの場合、この問題をスルーするのが現実的な判断になりそうですが…

ページを閲覧する人ができること

ページ内の写真などが動いていると「ペースト」の文字が消えてしまうので、スライドショーや写真がぐるぐる動き続けているページなどでは、JavaScriptをオフに設定してみると正常にペーストできることが多いと思います。あとは、文字を貼り付けせずにいちいち打ち込むほうが手間がかかるか、JavaScriptのオンオフ設定を切り替えるほうが手間がかかるかで判断していただければ良いかと思います。

以上、iPhoneなどのsafariでペーストができないことがある問題についてでした。

管理人にメッセージを送る





ページトップ