How can I detect changes in zoom level?

Open this page on Chrome or Safari and fiddle with the zoom level. You'll not开发者_JS百科ice a cute easing effect on its elements when you change the zoom level.

Apparently this only works on Chrome and Safari (webkit?), but how is this done? And is there a cross-browser way to do this?

I figured it out. JavaScript is not involved, it's pure CSS.

Namely, webkit's -webkit-transition property:

/* css */
.box {
   background: #5599ff; text-align: center;
   line-height: 80px; height: 80px; width: 100px;
   font-family: arial, helvetica; color: #FFF; 
   -webkit-border-radius:3px; margin: 10px }

.trans {
    -webkit-transition:all .218s; }

<!-- html -->
<div class="box"> STIFF </div>
<div class="box trans"> FLUID </div>

EDIT: Upon further research, I found out most browsers (ie: everything but IE) support a vendor specific transition CSS property. However, only webkit browsers use transitions when the page is resized.

See demo on jsfiddle

I dont think there is any (cross-browser) direct way of listening to page zoom event. There are some backdoors described on Catch browser's "zoom" event in JavaScript . however I think you can listen to Ctrl + + / - OR Ctrl+Mouse Wheel Event.