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

Archives Details

translateプロパティでAndroid,iPhone端末で画像がちらつく件

スマートフォン

2012.09.13

この記事は最終更新日から1年以上が経過しています。

あ、ども僕です。

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

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

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

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

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

<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でも画像がチラつかず、スライドさせることが出来ました!
いやぁ、ちょっと時間使いましたねぇ〜。

Comment

Related Article

「Band’s」スマートフォン版リリースしました!

2015.06.24

スマートフォンサイト制作における SCSSディレクトリ構成、Class命名について

2014.06.01

ドラクエモンスターズ スーパーライト ジェム 50,000円分 無料GET!! と謳っている【manekin】(マネキン)をやってみた!

2014.05.24

HTML5 WebビューApp ソーシャルゲーム制作時のまとめ

2013.08.17

スマートフォン タッチイベント、距離、速さ等確認ページ

2013.03.07

weinreでiPhone/Androidをリモートデバック

2013.01.27

translateプロパティでAndroid,iPhone端末で画像がちらつく件

2012.09.13

CSS3 アイコン作成 背景指定1つ 光彩グラデーションの表現

2012.05.19

スマートフォン JavaScript タッチ、フリックイベント実装その2 「ボールを投げる」

2012.02.18

スマートフォン JavaScript タッチ、フリックイベント実装

2012.02.18

CATEGORY LIST

LATEST NEWS

Flutter - Flameでゲーム作成 (キャラクターの移動)

Flutter

2023.07.23

Flutterで作る ChatGPT Prompt Manager

Flutter

2023.07.12

【M1 Mac】Python ScrapyがImportErrorで大ハマリ。lxmlなど環境作成し対応した件。

Python

2023.05.24

ミニPC Minisforum UM773 SE/ Liteがセールみたいだったので、ポチった件

イベント

2023.04.23

AI(ChatGPT)に聞くDart言語

Dart

2023.03.12

DartパッケージでPub Pointsを満点にする

Dart

2023.03.11

Dartパッケージをサクッと作成する

Dart

2023.03.07

DartでさくっとCLIツール作成。

Dart

2023.02.28

M1Macで行う「RUSTではじめるOpenGL」

Rust

2023.02.25

SolidityとEthereumによる実践スマートコントラクト開発 書評 ~ 再構築

暗号通貨、ブロックチェーン

2023.02.10

【Unity x WebAssembly】UnityコンテンツをBlazorとFlutterでWebアプリとして扱う

Unity

2023.01.30

【nasne】M1 Mac Miniで、「torne® mobile」使用して、テレビ視聴。

mac

2022.12.31

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US