Safari не учитывает CSS-transform-origin, «transform-box: fill-box» не помогает ⇐ CSS

[Anonymous]

Я использую Transform: Scale(0.8, 1), чтобы уменьшить ширину двузначных чисел на этом циферблате. Без использования Transform-origin числа соскальзывают со своих мест.

Transform-origin, который я использую, отлично работает Chrome и Firefox, но в Safari это не имеет значения. Вот как это должно выглядеть:




Вот что показывает Safari:

[img]https://i. sstatic.net/wCQcC.png[/img]


Все, что я нашел по этой проблеме, говорит о том, что Transform-box: fill-box решает эту проблему с Safari, но для меня это не делая никакой разницы. Некоторые старые решения связаны с использованием префикса -webkit-, но это не помогает и в любом случае должно быть проблемой только для более старых версий Safari.

Стиль применяется в JavaScript, поскольку эти элементы создаются динамически:

Код: Выделить всё

        text2.setAttribute('x', x2.toString());
text2.setAttribute('y', y2.toString());
text2.setAttribute('dy', '3.5');
text2.classList.add('clock-face');
text2.textContent = h.toString();

if (h > 9) {
text2.style.transformBox = 'fill-box';
text2.style.transform = 'scale(0.8, 1)';
text2.style.transformOrigin = [10, 19, 28][h - 10] + '%';
}

Я также пытаюсь реализовать проблему с помощью таблицы стилей, но безрезультатно:

Код: Выделить всё

.clock-face {
font-family: $clock-face-font;
font-size: 10px;
letter-spacing: -0.05em;
text-anchor: middle;
fill: white;
transform-box: fill-box !important;
user-select: none;
}

Остальные стили определенно применяются, поэтому CSS не игнорируется в целом. Веб-инспектор подтверждает, что поле преобразования было применено:

[img]https://i. sstatic.net/5QI05.png[/img]


Будем очень признательны за любые предложения по устранению этой проблемы.

Подробнее здесь: https://stackoverflow.com/questions/609 ... ot-helping