From a Far East Island

2012-10-31

毎日の Norisuke3 Twitterまとめ 2012/10/30

Powered by twtr2src

2012-07-28

毎日の Norisuke3 Twitterまとめ 2012/07/27

  • 12:03  RT @gryphonjapan: アナ「うなぎ相場どうですかぁ〜?」僕 「高い高いって、報道されてますけど、実際には5月からかなり下がって」…アナ「…申し訳無いんですけど今回の番組の趣旨と合わないので他店で取材させていただきます」 / “今朝、メッチャ腹立ちましてん|… ...

Powered by twtr2src

2012-07-01

[]はてな人力検索への質問

iframe @ iPad Safari で、-webkit-transform の scale() が2度適用される?

こんにちは。

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 に CSSbackground で背景画像を貼り付け、スケールがどのように行われるかを試しました。

iframe のデフォルトCSS 設定で枠線が表示されるのですが、枠線は scale() で指定した通りの大きさに縮小されるのですが、背景の表示域には、scale() が 2 度適用されたような結果が得られました。

例えば、scale(0.5) であれば、0.25 ( = 0.5 x 0.5 ) の様な感じです。

ChromeSafariFirefox でも試したのですが、このような現象は起こりません。

(firefox 用に -moz-transform も適用してあります。)

また、手元にあるAndroid 端末 ( Kindle Fire )でもiPad Safari のようにはなりませんでした。

ただ、私の使っている Chromium (ver. 13.0.768.0 (85549) )では、iPad と同じ結果になりました。

私の iPad は、iOS 5.0.1 です。

2012-06-17

毎日の Norisuke3 Twitterまとめ 2012/06/16

Powered by twtr2src

2012-05-30

[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 が何処から来るか調べ中。