Веб-браузер компилирует элементы CSS в алфавитном порядке

в первую очередь

Порядок свойств CSS является релевантным.

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

Оба элемента имеют одинаковые свойства CSS и отображаются равными.

во- вторых

Свойство CSS- zoom не является стандартным и, вероятно, имеет проблему при использовании с позиционированием. Способом преодоления этой проблемы является использование scale():

Сравните масштабирование и масштабирование абсолютно позиционированных элементов. ¹

scale(), однако, требует префиксов браузера:

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

Другой метод, более совместимый с IE, - использовать абсолютно позиционируемый контейнер и применять масштабирование к ребенку. Масштабирование с контейнером:

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

сноска

_{1: Fiddles, заимствованные из стиля zoom css, не применяются к установленному абсолютному элементу div, а его дети в IE}

Как насчет этого?

var myFunnyZoomVariable = безотносительно;

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