JavaScript

スライダーの始めと終わりの行き来の際に、画像が表示されなくなるバグを修正した

2016年4月21日

動作環境

OS: Android4.4.2(xperia S0-02E)

 

現象

ループする画像スライダーが、先頭から終わりへ移動した時、または終わりから先頭に移動した時に、移動先の画像が表示されなくなる現象が発生しました。

 

解決法

管理人の場合は、bodyタグに以下cssを設定することで解決ができました。

body
{
-webkit-backface-visibility:hidden;
}

何をしているかというと、
上記現象を調べてみると、上層に画像が存在しているにも関わらず、body要素が画面に表示されてしまっていました。

なので、-webkit-backface-visibility:hiddenを設定すると、背面要素を不可視化することができます。
つまり、body要素が見えなくなります。
画像が表示されます。

解決です。
今日はこんなところで

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-JavaScript
-, ,