Web browser compiles css elements alphabetically

    '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.


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.


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;">


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