Created attachment 469084 [details] screenshot While testing https://github.com/WebKit/WebKit/pull/21741 (bug 266347) I found an issue for this input: data:text/html,<input%20type=checkbox%20switch%20style=width:10px;height:10px;writing-mode:vertical-rl> I also tested it with writing-mode set on a parent: data:text/html,<p%20style=writing-mode:vertical-rl><input%20type=checkbox%20switch%20style=width:10px;height:10px> In both cases a repaint issue occurs. This happens because of the flipForWritingModeCall() call in RenderBox::computeVisibleRectsInContainer(): if (isWritingModeRoot()) { if (!isOutOfFlowPositioned() || !context.dirtyRectIsFlipped) { flipForWritingMode(adjustedRects); context.dirtyRectIsFlipped = true; } } It incorrectly adjusts the x offset obtained from RenderThemeMac::adjustRepaintRect() at some earlier point. Removing the call to flipForWritingMode() here fixes the issue. In fact, making flipForWritingMode() a no-op fixes the issue, but I have not run all tests to see if that is the solution. I would appreciate some advice from a layout expert as I'm out of my depth. I've attached a screenshot from the broken rendering. I'm not sure how to reproduce this without vertical switch support. Perhaps Aditya can think of another themed element with a similar issue.
I have seen Blink patch from 2014 / 2015 touching this function and removing 'OutOfFlow' condition. Although, we have added 'dirtyRect' context so I think we can remove it as well. I will try to find it, it might have failing test case as well.
Reference - https://src.chromium.org/viewvc/blink?view=revision&revision=177870
That's a nice find! However, with that patch you'd still hit my issue. Because for my issue isWritingModeRoot() has to be true, and as it happens both isOutOfFlowPositioned() and context.dirtyRectIsFlipped are false.
This reproduces on macOS WebKit main 1. data:text/html,<input%20type=checkbox%20switch%20style=width:10px;height:10px;writing-mode:vertical-rl> 2. Click the switch in the top left corner. The cause is vertical-rl, it does not reproduce with vertical-lr.
It seems this is a regression. data:text/html,<input%20type=checkbox%20style=width:5px;height:5px;writing-mode:vertical-rl> works fine in earlier releases.
<rdar://problem/120066970>
Pull request: https://github.com/WebKit/WebKit/pull/22516
Committed 272799@main (5cf446ee596f): <https://commits.webkit.org/272799@main> Reviewed commits have been landed. Closing PR #22516 and removing active labels.