このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

あ、ども僕です。

最近、何かとスライダー的なやつを扱う機会が増えております。

よくあるスライダーですね。

こんな感じのやつですね。

画像がスーっと行くやつ。バナーなんかで良く見かけますよね。

これをスマフォンサイトでも実装しているのですが、マークアップは単純に

<div class="slider">
  <ul class="sliderLi">
    <li><img src="yes.jpg" alt="no"></li>
    <li><img src="yes.jpg" alt="no"></li>
    <li><img src="yes.jpg" alt="no"></li>
  </ul>
</div>

 

こんな感じだったりします。

liの親要素であるulに-webkit-transform:translate(-350px,0px);などで

動かしてスライドしているかの様に実装するのですが、

スライドする際、やたらと画像がチラつく！

iPhoneでもAndroidでもチラつく様子。

これは、ググって頂いてもいっぱいでるのですが、translate3dを利用すると解消する。

と沢山出てきます。つまりこういう事ですね。

-webkit-transform:translate(-350px,0px);

 

を↓

-webkit-transform:translate3d(-350px,0px,0px);

 

に変更すると解消されると。

ホントかよー。実際行ってみますと、解消されます。

おースゲー。iPhoneでもAndroidでも。。。。

ん。

Androidではまだ全然ちらついている！！

おー。回避できないのかよーと嘆いていると、どうやら原因を突き止めたようだ。

-webkit-transition:all 0.4s ease-in;

 

なんて、まとめて指定していると、それだけで負荷がかかるのかチラツキが消えない。

これをバラして指定。

-webkit-transition-property: transform;
-webkit-transition-duration:0.4s;
-webkit-transition-timing-function:ease-in;

のようにバラして記述することによって、Androidでも画像がチラつかず、スライドさせることが出来ました！
いやぁ、ちょっと時間使いましたねぇ〜。