Safari not honoring CSS transform-origin, `transform-box: fill-box` not helping

user_7361479 0
Viewed 347

I'm using transform: scale(0.8, 1) to squeeze the width of the two-digit numbers on this clock face. Without also using transform-origin, the numbers slip out of their proper places.

The transform-origin I'm using works fine on Chrome and Firefox, but makes no difference on Safari. Here's how it should look:

Chrome screenshot

Here's what Safari shows:

Safari screenshot

Everything I've found so far about this issue says that transform-box: fill-box fixes this problem with Safari, but for me it's making no difference. Some older solutions have to do with using the -webkit- prefix, but that doesn't help, and should only be an issue for much older versions of Safari anyway.

The styling is applied in JavaScript, as these elements are created dynamically:

        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] + '%';
        }

I'm also trying to enforce the issue via stylesheet, to no avail:

.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;
}

The rest of these styles are definitely being applied, so it's not like the CSS is being ignored in general. The Web Inspector confirms the transform-box has been applied:

Safari Web Inspector screenshot

Any suggestions about how to fix this problem would be greatly appreciated.

safari svg css html javascript
1 Answers

This isn't ideal, and I'd still like to know what's going on with transform-origin, but just solving the problem differently by using the dx attribute instead of transform-origin works with Safari and the other browsers as well.

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