毎日の Norisuke3 Twitterまとめ 2012/07/27
- 12:03 RT @gryphonjapan: アナ「うなぎ相場どうですかぁ〜？」僕 「高い高いって、報道されてますけど、実際には５月からかなり下がって」…アナ「…申し訳無いんですけど今回の番組の趣旨と合わないので他店で取材させていただきます」 / “今朝、メッチャ腹立ちましてん｜… ...
Powered by twtr2src
はてな人力検索への質問
iframe @ iPad Safari で、-webkit-transform の scale() が２度適用される？
こんにちは。
iPad Safari で不思議な現象に遭遇しました。
親ページと子ページを用意し、iframe を使って親ページに子ページを埋め込みました。
そして、iframe の一つ外側の要素にCSSの -webkit-transform: scale() を適用した結果が以下のリンクになります。
上から、scaleに 1、0.75、0.5、0.25 と渡した結果です。
http://www.firedictionary.com/tmp/nori_test_a100.html
http://www.firedictionary.com/tmp/nori_test_a75.html
http://www.firedictionary.com/tmp/nori_test_a50.html
http://www.firedictionary.com/tmp/nori_test_a25.html
子ページのbody に CSS の background で背景画像を貼り付け、スケールがどのように行われるかを試しました。
iframe のデフォルトのCSS 設定で枠線が表示されるのですが、枠線は scale() で指定した通りの大きさに縮小されるのですが、背景の表示域には、scale() が 2 度適用されたような結果が得られました。
例えば、scale(0.5) であれば、0.25 ( = 0.5 x 0.5 ) の様な感じです。
Chrome、Safari、Firefox でも試したのですが、このような現象は起こりません。
(firefox 用に -moz-transform も適用してあります。)
また、手元にあるAndroid 端末 ( Kindle Fire )でもiPad Safari のようにはなりませんでした。
ただ、私の使っている Chromium (ver. 13.0.768.0 (85549) )では、iPad と同じ結果になりました。
私の iPad は、iOS 5.0.1 です。
毎日の Norisuke3 Twitterまとめ 2012/06/16
- 09:07 高野さんと飲んでます〜。浅草ギークナイト二次会 ( http://t.co/7zE0WmmV で配信中)
Powered by twtr2src
[javascript][CSS] transform に関する覚書
transform-origin を変えると、scale に影響する。なので、translate で補正してあげる必要がある。
以下の3つは同じように見える。
origin(0 0) scale(1.5) origin(100 100) scale(1.5) translate(33px, 33px) origin(200 200) scale(1.5) translate(66px, 66px)
33 = 100 / 2 / 1.5
66 = 200 / 2 / 1.5
/ 2 が何処から来るか調べ中。
