Moved to github.io

This blog has moved to github page (http://cat-in-136.github.io/).
Japanese(和文): cat_in_136.blog() は、github page (http://cat-in-136.github.io/) に引っ越ししました。

Unofficial CSS property zoom implemented on WebKit

I found unofficial CSS property "zoom" is implemented on WebKit (Safari and Google Chrome.) And is not implemented on Gecko (Firefox.)

Here is test of CSS zoom. (scale by 200%.)
<div style="zoom: 2.0; background-color: #ff8;">
Here is test of CSS <code>zoom</code>. (scale by 200%.)
</div>

I think if you wanna scale you SHALL use CSS3 transform as follows:

Here is test of CSS3 transform. (scale by 200%.)
<div style="transform: scale(2); -webkit-transform: scale(2); -webkit-transform-origin: 0 0; -moz-transform: scale(2); -moz-transform-origin: 0 0; -o-transform: scale(2); -o-transform-origin: 0 0; -ms-transform: scale(2); -ms-transform-origin: 0 0;">
Here is test of CSS <code>transform</code>. (scale by 200%.)
</div>

Note that...

  • CSS3 transform is a W3C working draft. So vender prefix (e.g. -webkit-, -moz-, -o-, and/or -ms-) is required.
  • The default value of transform-origin is "50% 50%" (or center center) So I specified transform-origin: 0 0 (or top left) to do the same thing with zoom.

6 comments :

  1. Thanks for the trick. It is Working fine on android( Galaxy Note)

    ReplyDelete
  2. scale sucks it's a pain in the S as all css3 properties. scratch taht.

    ReplyDelete
  3. Will image increase its size by scale property in chrome?

    ReplyDelete
  4. Great web site! Let me pay out much more awareness in your weblog,many thanks.

    ReplyDelete
  5. thx a lot.it helped me to solve our company issue and it work for me on chrome browser.

    ReplyDelete