Web browser compiles css elements alphabetically

advertisements
map.css({
    'zoom': zoom,
    'left': map.width()/(2*zoom) - (point[0]/100)*map.width(),
    'top': map.height()/(2*zoom) - (point[1]/100)*map.height()

It looks like Chrome zooms our map then applies the left and top properties and IE applies to left and top properties and then zooms which lowers then left and top movements by factor of zoom.


Firstly

The order of CSS properties is irelevant.

elementA {
    propA: valA,
    probB: valB
}
elementB {
    propB: valB,
    probA: valA
}

Both elements have same CSS properties and are displayed equaly.

Secondly

CSS zoom property is not-standard and probably has an issue when used with positioning. A way of overcoming this problem is using scale():

Compare Zooming vs. Scaling absolutely posisioned elements.1

scale(), however, requires browser prefixes:

.zoomed-element {
    -webkit-transform: scale(.5);
       -moz-transform: scale(.5);
        -ms-transform: scale(.5); // IE 9
            transform: scale(.5);
}

Other method, a more IE compatible one, is to use an absolutely positioned container and apply zooming to the child Zooming with container:

<div style="position: absolute; top: 10px; left: 10px;">
    <div style="width: 100px; height: 100px; zoom: 2; background-color: red;">
</div>


Footnote

1: Fiddles borrowed from zoom css style is not applied to positioned absolute div element and it's children in IE