Bug 246100

Summary:

Text is slightly misaligned at specific font sizes or container widths

Product:

WebKit

Reporter:

Roel Nieskens <webkitbugzilla>

Component:

Text

Assignee:

zalan <zalan>

Status:

NEW ---

Severity:

Normal

CC:

changseok, esprehn+autocc, ews-watchlist, glenn, karlcow, kondapallykalyan, mmaxfield, pdr, webkit-bug-importer, webkitbugzilla, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 15

Hardware:

Mac (Intel)

OS:

macOS 12

See Also:

https://bugs.webkit.org/show_bug.cgi?id=261212

Attachments:

Description	Flags
Test reduction	none
Test without flex (simple out-of-flow positioning)	none
Fix with screenrecording	none
Patch	none
Patch	ews-feeder: commit-queue-

Description Roel Nieskens 2022-10-05 12:06:39 PDT

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.

Comment 1 Roel Nieskens 2022-10-05 12:51:33 PDT

> Curiously, it does happen in Windows.

Sorry, this should read:

Curiously, it does happen in the Opera browser.

Comment 2 Radar WebKit Bug Importer 2022-10-05 15:29:21 PDT

<rdar://problem/100826711>

Comment 3 Roel Nieskens 2022-10-06 01:48:14 PDT

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.

Comment 4 zalan 2022-10-06 09:44:51 PDT

Created attachment 462839 [details]
Test reduction

Comment 5 zalan 2022-10-06 11:05:00 PDT

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

Comment 6 zalan 2022-10-06 12:01:03 PDT

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()

Comment 7 zalan 2022-10-06 12:02:25 PDT

Created attachment 462844 [details]
Fix with screenrecording

Comment 8 zalan 2022-10-06 20:22:50 PDT

Created attachment 462857 [details]
Patch

Comment 9 zalan 2022-10-06 20:23:39 PDT

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

Comment 10 zalan 2023-04-17 18:51:47 PDT

Created attachment 465952 [details]
Patch

Comment 11 zalan 2023-04-18 07:06:33 PDT

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

Comment 12 zalan 2023-04-22 21:56:38 PDT

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