Safari не соблюдает CSS transform-origin, `transform-box: fill-box` не помогает - PullRequest
Новая
       5

Safari не соблюдает CSS transform-origin, `transform-box: fill-box` не помогает

0 голосов
/ 29 марта 2020

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

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

Chrome screenshot

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

Safari screenshot

Все, что я нашел до сих пор об этой проблеме, говорит о том, что 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 вообще игнорируется. Веб-инспектор подтверждает, что transform-box был применен:

Safari Web Inspector screenshot

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

1 Ответ

0 голосов
/ 29 марта 2020

Это не идеально, и я все еще хотел бы знать, что происходит с transform-origin, но просто решение проблемы по-другому с использованием атрибута dx вместо transform-origin работает с Safari и другими браузерами а также. 

        if (h > 9) {
          text2.style.transform = 'scale(0.8, 1)';
          text2.setAttribute('dx', ['4', '8', '12.5'][h - 10]);
        }
...