user-scalable=noとposition: fixedを使用すると、-webkit-transformが動かなくなる

esperia

2011-11-01 19:56:38

License: MIT License

Fork: 0

Fav: 0

View: 1395

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 0 lines
HTML 28 lines
CSS 0 lines

user-scalable=noとposition: fixedを使用すると、-webkit-transformが動かなくなる

user-scalable=noとposition: fixedを使用すると、-webkit-transformが動かなくなる

fixedなしバージョンはこちら。 http://jsrun.it/esperia/plhF ( http://jsdo.it/esperia/plhF ) ※jsrun.itの方か、Smart Phoneボタン押さないとちゃんとうごかないです Androidでuser-scalable=noの時、-webkit-transformを使って回転させる要素とは別の要素にposition: fixedをつけた場合、回転させたい要素にも影響する問題。 Android 2.2, 2.3で確認しました。position: fixedがあったら回転しません。なかったら意図した動作になります。バグですかね…<!doctype html> <html> <head> <title></title> <meta name="viewport" content="user-scalable=no" /> <style type="text/css"> ul#nav { position: fixed; } div.bar { height: 100px; width: 20px; margin: 150px 0 0 0; background: #000; -webkit-transform:rotate(30deg) translate(0, -142%); } </style> </head> <body> <h1>position: fixed;</h1> <ul id="nav"></ul> <div class="bar"></div> </body> </html>

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/cbhI/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/esperia/cbhI" title="user-scalable=noとposition: fixedを使用すると、-webkit-transformが動かなくなる">user-scalable=noとposition: fixedを使用すると、-webkit-transformが動かなくなる - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code