Bug 246100 – Text is slightly misaligned at specific font sizes or container widths

• Component: Text
• Status: NEW

[Roel Nieskens]

A perfectly square character will be misaligned in certain cases.

See in action: https://codepen.io/RoelN/pen/xxjpwjP

There are two ways to trigger this bug:

1. Container is 800px. The font size of the icon is 64px, and is spinning via a CSS animation. The icon is centered (good). Change the font size to 64px, and the icon is suddenly not centered. It "wobbles". This is not good.

2. With the font size at 64px, there is no wobble. But change the container width to 800.5px, and the character wobbles. Anything below 0.5 will not cause a wobble, but anything above 0.5 will.

This does not happen in Firefox of Chrome. Curiously, it does happen in Windows.

I'm on a MacBook Pro (16-inch, 2019), 2,6 GHz 6-Core Intel Core i7. Safari Version 15.6.1 (17613.3.9.1.16), no extensions.

[Roel Nieskens]

> Curiously, it does happen in Windows.

Sorry, this should read:

Curiously, it does happen in the Opera browser.

[Radar WebKit Bug Importer]

<rdar://problem/100826711>

[Roel Nieskens]

I really should've had more coffee before writing this, apologies for the noise.

> Change the font size to 64px, and the icon is suddenly not centered.

Should read:

Change the font size to 68px, and the icon is suddenly not centered.

[alan]

Created attachment 462839 [details]
Test reduction

[alan]

Created attachment 462840 [details]
Test without flex (simple out-of-flow positioning)

[alan]

This seems to be caused by the lack of inline content (horizontal) pixelsnapping (the visual glitch shows up when the block painting produces a pixelsnapped (position/size) block box while the inline painting stays on a non-snapped position. On a 2x display, it's most visible at 0.25 and 0.75 where the block box get pixelsnapped to 0.5, 1, while the inline content is still painted at 0.25 and 0.75 (touching border).

the following snippet fixes the test case (it surely needs some more work though).

diff --git a/Source/WebCore/rendering/RenderBlockFlow.cpp b/Source/WebCore/rendering/RenderBlockFlow.cpp
index 6f46a2aaf2ae..0141ac14dfff 100644
--- a/Source/WebCore/rendering/RenderBlockFlow.cpp
+++ b/Source/WebCore/rendering/RenderBlockFlow.cpp
@@ -3486,13 +3486,14 @@ void RenderBlockFlow::paintInlineChildren(PaintInfo& paintInfo, const LayoutPoin
 {
     ASSERT(childrenInline());
 
+    auto adjustedPaintOffset = LayoutPoint { roundPointToDevicePixels(paintOffset, document().deviceScaleFactor()) };
     if (modernLineLayout()) {
-        modernLineLayout()->paint(paintInfo, paintOffset);
+        modernLineLayout()->paint(paintInfo, adjustedPaintOffset);
         return;
     }
 
     if (legacyLineLayout())
-        legacyLineLayout()->lineBoxes().paint(this, paintInfo, paintOffset);
+        legacyLineLayout()->lineBoxes().paint(this, paintInfo, adjustedPaintOffset);
 }
 
 bool RenderBlockFlow::relayoutForPagination()

[alan]

Created attachment 462844 [details]
Fix with screenrecording

[alan]

Created attachment 462857 [details]
Patch

[alan]

let's see what EWS has to say about it.

[alan]

Created attachment 465952 [details]
Patch

[alan]

There are quite a few (~25) subpixel diff type of failures.

[alan]

This is blocked by integral rounding in IFC (planning on removing it).