CSS缩放与Javascript缩放之战

Question

Looking at this example fiddle (I'm using Chrome 33)

the CSS and Javascript set zoom on the same object are working in unison, and not like normal styles should be by overriding.. and in a selective manner.

CSS

#text { zoom: 0.8}

HTML

<div>
    <div id='text'> text </div>
    <div id='other'> text fixed zoom 1</div>
</div>

^ an element with css zoom 0.8 looks at size 0.8. great.

var texty = document.getElementById('text');
texty.style.zoom = 1;

^ an element with css zoom 0.8 and a javascript (thus inline) zoom of 1 looks at size 1. great.

This I expect, the inline style set by javascript should have precedence.

texty.style.zoom = 0.8;

^ BUT an element with css zoom 0.8 and a javascript zoom of 0.8 looks size 1 as well. (0.8/0.8). Why now is it working together?

The fiddle linked toggles the javascript set zoom value from 0.8 to 1, but no visual difference is found demonstrating the above issue. I'd like to know why this is, and how to I work around it.

The purpose of this is so that a series of rendered html cards enter the page at a default 0.8, and as they are programmatically selected they "zoom" up to 1, then as passed they are "zoomed" back to 0.8 but this return breaks. It feels a waste to constantly scan the li's for new cards added to the list, hence I want a default zoom: 0.8 set via css.

Answer 1

I checked in newest chrome it is not working. I suspicious it is a bug. But you can work around it by set it to a slightly different value. For example in your case you could set it to 0.79 and it will work.

Answer 2

There is no zoom property in CSS standards, up to CSS3.

It is originally a proprietary CSS standards by IE, but later adopted by other browsers. It is theoretically working in all major browsers (Firefox has its own syntax, though), but it's proven not working well in Chrome 33, by OP. Another proof that it is NOT recommended to be used in production sites.

If you want to scale the contents, you can use CSS transforms .

ps If you change the text to an image, it works sometimes in Chrome.

It is suggested that you can use the followings for images :

#test img {
  height: 100%;
  width: 100%; /* change from 100% to 80% for zoom: 0.8; effect */
}

For texts , you can just change the font-size (and for readability, you may want to change the line-height too).