Duplicating a Zoom CSS object on the same element resets to 1 in Chrome

Question

Here is a simplified version of the problem (bug?) That I experienced:

http://jsfiddle.net/LxkA2/8/

Note the third element and related style:

.zoom-twice-same { zoom: 2; } .zoom-twice-same { zoom: 2; } 

In Chrome, it zooms out to 1 on this element. The same thing happens with:

 .zoom-twice-same, .zoom-twice-same { zoom: 2; } 

but

 .zoom-twice-same { zoom: 2; } .zoom-twice-same { zoom: 3; } 

Works as expected (element 2).

Besides,

 .zoom-twice-same { zoom: 2.000001; } .zoom-twice-same { zoom: 2; } 

It works as expected. Using zoom: 2.0000001 and 2 - no.

Is this a mistake or is there a reason for this behavior?

Answer 1

I checked your JSFiddle and noticed that you repeated CSS twice:

 .zoom-twice-same { zoom: 2; } 

When I deleted the second .zoom-twice-same , the problem did not recur, as you will see here .