Добрый день! Вопрос у меня по фронтенду.
Есть районная система отслеживания транспорта. И там для иконок автобусов используется поворот, чтобы обозначить направление его движения.
Ранее поворот реализовался на JS вот так:
$(marker._icon)[0].style.transform = $(marker._icon)[0].style.transform + " rotate("+pos.v.c+"deg)";
Т.е. применялось свойство CSS3 transform: rotate(Ndeg);Это вызывало проблемы в браузерах, которые не поддерживают CSS3: иконки просто не крутились, что логично.
Я добавил такой код:
$(marker._icon)[0].style.transform = $(marker._icon)[0].style.transform + " rotate("+pos.v.c+"deg)";
$(marker._icon)[0].style['-webkit-transform'] = $(marker._icon)[0].style['-webkit-transform'] + " rotate("+pos.v.c+"deg)";
$(marker._icon)[0].style['-ms-transform'] = $(marker._icon)[0].style['-ms-transform'] + " rotate("+pos.v.c+"deg)";
$(marker._icon)[0].style['-moz-transform'] = $(marker._icon)[0].style['-moz-transform'] + " rotate("+pos.v.c+"deg)";
Т.е. добавил еще вендорных префиксов, чтобы улучшить поддержку поворота.
Все стало хорошо в браузерах, но в Chromium 52.0 (Ubuntu 16.04) свойство задвоилось, т.е. к иконкам начала (успешно) применяться конструкция вида transform: rotate(67deg) rotate(67deg); Угол поворота рассчитывался в 2 раза больший и иконки смотрели не туда.
Когда я убрал
$(marker._icon)[0].style.transform = $(marker._icon)[0].style.transform + " rotate("+pos.v.c+"deg)";
и оставил только вендорные префиксы, в Хромиуме все восстановилось, однако полностью игнорировать поворот стала Mozilla (кроме "ночных" сборок).
В итоге, я не могу понять, что делать. Если я не указываю чистый rotate без префиксов, то теряю Mozilla и, может, что-то еще. Если указываю - теряю Хромиум (и Хром для Андроида), т.к. там углы двоятся. Вообще, почему они двоятся? Я крайне удивлен такому поведению...
Простой
