Skip to content

base-select option hover style clipping with rotated transforms#61963

Closed
annevk wants to merge 1 commit intoWebKit:mainfrom
annevk:eng/base-select-option-hover-style-clipping-with-rotated-transforms
Closed

base-select option hover style clipping with rotated transforms#61963
annevk wants to merge 1 commit intoWebKit:mainfrom
annevk:eng/base-select-option-hover-style-clipping-with-rotated-transforms

Conversation

@annevk
Copy link
Copy Markdown
Contributor

@annevk annevk commented Apr 3, 2026

de2f0a7

base-select option hover style clipping with rotated transforms
https://bugs.webkit.org/show_bug.cgi?id=311402
rdar://171933742

Reviewed by NOBODY (OOPS!).

In https://patrickbrosset.com/lab/custom-select/folders/ the options
drawn outside the ::picker(select) rectangle have their :hover effect
clipped by the rectangle because
RenderBox::addOverflowWithRendererOffset() didn't account for visible
overflow from 2D transforms. This is tested by the first test below.

We attempt to offset the impact of this change a bit with
ExcludeSelfPaintingChildOverflow.

Additionally, HTMLOptionElement::willResetComputedStyle() caused
repaint() to be invoked way too often for appearance: base <select>
elements. This is tested by the second test.

Tests: fast/repaint/overflow-visible-transformed-child-repaint.html
       fast/forms/select/base/select-rotated-option-hover-repaint.html

de2f0a7

Misc iOS, visionOS, tvOS & watchOS macOS Linux Windows Apple Internal
✅ 🧪 style ✅ 🛠 ios ✅ 🛠 mac ✅ 🛠 wpe ✅ 🛠 win ✅ 🛠 ios-apple
✅ 🧪 bindings ✅ 🛠 ios-sim ✅ 🛠 mac-AS-debug ❌ 🧪 wpe-wk2 ❌ 🧪 win-tests ✅ 🛠 mac-apple
✅ 🧪 webkitperl ❌ 🧪 ios-wk2 ✅ 🧪 api-mac ✅ 🧪 api-wpe ✅ 🛠 vision-apple
❌ 🧪 ios-wk2-wpt ✅ 🧪 api-mac-debug ✅ 🛠 gtk3-libwebrtc
✅ 🧪 api-ios ✅ 🧪 mac-wk1 ✅ 🛠 gtk
✅ 🛠 ios-safer-cpp ❌ 🧪 mac-wk2 ❌ 🧪 gtk-wk2
✅ 🛠 vision ❌ 🧪 mac-AS-debug-wk2 ✅ 🧪 api-gtk
✅ 🛠 vision-sim ✅ 🧪 mac-wk2-stress ✅ 🛠 playstation
❌ 🧪 vision-wk2 ❌ 🧪 mac-intel-wk2
✅ 🛠 tv ✅ 🛠 mac-safer-cpp
✅ 🛠 tv-sim
✅ 🛠 watch
✅ 🛠 watch-sim

@annevk annevk self-assigned this Apr 3, 2026
@annevk annevk requested review from cdumez and rniwa as code owners April 3, 2026 07:13
@annevk annevk added the Layout and Rendering For bugs with layout and rendering of Web pages. label Apr 3, 2026
@webkit-early-warning-system

This comment was marked as outdated.

@annevk annevk force-pushed the eng/base-select-option-hover-style-clipping-with-rotated-transforms branch from d9e9800 to 0ce2612 Compare April 3, 2026 07:23
@webkit-early-warning-system

This comment was marked as outdated.

@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Apr 3, 2026
@annevk annevk removed the merging-blocked Applied to prevent a change from being merged label Apr 3, 2026
@annevk annevk force-pushed the eng/base-select-option-hover-style-clipping-with-rotated-transforms branch from 0ce2612 to 6546918 Compare April 3, 2026 12:34
@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Apr 3, 2026
@annevk annevk marked this pull request as draft April 3, 2026 14:38
Comment thread Source/WebCore/rendering/RenderBox.cpp Outdated
// the child block ourselves.
if (renderer.hasSelfPaintingLayer() && !hasFilter())
if (renderer.hasSelfPaintingLayer() && !hasFilter()
&& (!renderer.hasTransformRelatedProperty() || hasNonVisibleOverflow()))
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This includes transformStyle3D and perspective which probably aren't relevant there. Maybe we need a version that only looks for actual, non-identity transforms.

https://bugs.webkit.org/show_bug.cgi?id=311402
rdar://171933742

Reviewed by NOBODY (OOPS!).

In https://patrickbrosset.com/lab/custom-select/folders/ the options
drawn outside the ::picker(select) rectangle have their :hover effect
clipped by the rectangle because
RenderBox::addOverflowWithRendererOffset() didn't account for visible
overflow from 2D transforms. This is tested by the first test below.

We attempt to offset the impact of this change a bit with
ExcludeSelfPaintingChildOverflow.

Additionally, HTMLOptionElement::willResetComputedStyle() caused
repaint() to be invoked way too often for appearance: base <select>
elements. This is tested by the second test.

Tests: fast/repaint/overflow-visible-transformed-child-repaint.html
       fast/forms/select/base/select-rotated-option-hover-repaint.html
@annevk annevk removed the merging-blocked Applied to prevent a change from being merged label Apr 5, 2026
@annevk annevk force-pushed the eng/base-select-option-hover-style-clipping-with-rotated-transforms branch from 6546918 to de2f0a7 Compare April 5, 2026 06:17
@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Apr 5, 2026
@annevk
Copy link
Copy Markdown
Contributor Author

annevk commented Apr 5, 2026

I think I found a more targeted approach: #62087

@annevk annevk closed this Apr 11, 2026
@annevk annevk deleted the eng/base-select-option-hover-style-clipping-with-rotated-transforms branch April 11, 2026 15:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Layout and Rendering For bugs with layout and rendering of Web pages. merging-blocked Applied to prevent a change from being merged

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants