Currently, I am using transform: scale(0.8, 1) to adjust the width of two-digit numbers on a clock face. However, without implementing transform-origin, the numbers do not stay in their correct positions.
The transform-origin that I have set works perfectly on Chrome and Firefox, but unfortunately has no effect on Safari. The desired outcome is shown here:
https://i.sstatic.net/sksvZ.png
This is how it appears on Safari:
https://i.sstatic.net/wCQcC.png
I have come across information suggesting that using transform-box: fill-box can resolve this issue with Safari, but in my case it does not seem to make any difference. Some older recommendations involve using the -webkit- prefix, however, this does not help either and should only be relevant for much earlier versions of Safari.
The styling is added via JavaScript since these elements are generated 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 have also attempted to address the issue through stylesheet enforcement, but have had no success:
.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;
}
All other styles are being applied correctly, so it does not seem like CSS is completely disregarded. The Web Inspector confirms that transform-box has been implemented:
https://i.sstatic.net/5QI05.png
If anyone has suggestions on how to resolve this issue, they would be greatly appreciated.