rotate + counter-rotate by same angle smears text
Categories
(Core :: CSS Parsing and Computation, defect)
Tracking
()
People
(Reporter: pomax, Unassigned)
Details
Attachments
(3 files)
result.png
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0
Steps to reproduce:
Run the following code on Windows 10 pro in Firefox nightly (dec 13 2024), which should effectively be a null-rotation for the ".data" element, only a translation.
It looks like there's some rounding going wrong somewhere, based on only specific box dimensions leading to horrible looking results.
STR code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
body {
font-family: Arial;
div {
transform-origin: 250px 250px;
box-sizing: border-box;
background: gold;
width: 200px;
height: 200px;
--deg: 0deg;
transform: rotate(var(--deg));
.data {
transform-origin: center center;
display: inline-block;
background: white;
height: 96px;
--bad-value: 95px;
--good-value: 96px;
width: var(--bad-value);
}
& + div {
--deg: 90deg;
.data {
--deg: -90deg;
}
}
}
}
</style>
</head>
<body>
<div>
<div class="data">
<span>Mahjong Monkey</span>
</div>
</div>
<div>
<div class="data">
<span>Mahjong Monkey</span>
</div>
</div>
</body>
</html>
Actual results:
See image "result.png"
Expected results:
See image "correct.png"
| Comment hidden (off-topic) |
|
||
Comment 3•2 months ago
|
||
|
|
||
Comment 4•2 months ago
|
||
can you go to "about:support" in your Firefox browser, and copy-paste its contents here?
If there's anything in particular you'd like to know I'll add that, but I'm not pasting a complete dump of personal system information on a public issue tracker.
|
||
Comment 6•2 months ago
|
||
Have you looked at about:support? The only thing I see there that's personal is directory path with my windows user name in 9 places, which is easily edited out.
It also acts as a ridiculously detailed fingerprint, so I will be happy to give specific information, but not a blanket copy-paste of my full system. That said: before asking for a system dump, did you load the example?
Because every single Firefox I tried has this problem, whether it's Nightly or main release, and irrespective of Windows or MacOS. Depending on the width of the box the counter rotation fails subtly (I'd assume because of rounding somewhere) leading to misaligned text looking blurry/smeared.
|
||
Comment 8•2 months ago
|
||
It looks like there's some rounding going wrong somewhere, based on only specific box dimensions leading to horrible looking results.
Potentially some kind of subpixel snapping + scaling issue?
Description
•