[Webkit-unassigned] [Bug 258539] New: Flex widths do not correctly recalculate on hover
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Mon Jun 26 16:12:36 PDT 2023
https://bugs.webkit.org/show_bug.cgi?id=258539
Bug ID: 258539
Summary: Flex widths do not correctly recalculate on hover
Product: WebKit
Version: Safari 16
Hardware: Mac (Apple Silicon)
OS: macOS 13
Status: NEW
Severity: Normal
Priority: P2
Component: Layout and Rendering
Assignee: webkit-unassigned at lists.webkit.org
Reporter: constance.chen at elastic.co
CC: bfulgham at webkit.org, simon.fraser at apple.com,
zalan at apple.com
Created attachment 466829
--> https://bugs.webkit.org/attachment.cgi?id=466829&action=review
Gif of the issue on hover, and then a gif of what the behavior should be on focus
This *specifically* affects the `:hover` pseudo state and *not* the `:focus` pseudo state.
- The widths affected are both `width` and `flex-basis` properties, neither seem to matter for the purposes of this bug.
- Both `animation` and `transition` are affected by this bug as well as when no animation/transition is present
Here is a minimum reproducible Codepen of the issue: https://codepen.io/Cee-Chen/pen/PoxWeZa
On Firefox and Chrome/Edge, on hover, the text within `.shrinkingContent` is correctly pushed/shifted to the left (its flex width accounts for the sibling that gains a width on hover).
In Safari (latest 16.5), the text within `.shrinkingContent` does *not* update correctly and instead of shifting to the left, it gets overlaid by the new sibling. The reason this is a rendering issue is because if you do anything to force a refresh/rerender (e.g. double clicking where the text should be, adding an animation to `.shrinkingContent`), the view updates to what the expected layout should be.
Also, per the first line, if you focus the wrapper via tab keypress instead of hovering, this rendering issue does not occur whatsoever.
--
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230626/c8db3fb1/attachment.htm>
More information about the webkit-unassigned
mailing list