Bug 258539

Summary:

Flex widths do not correctly recalculate on hover

Product:

WebKit

Reporter:

Cee Chen <constance.chen>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED WORKSFORME

Severity:

Normal

CC:

bfulgham, karlcow, simon.fraser, zalan

Priority:

Version:

Safari 16

Hardware:

Mac (Apple Silicon)

OS:

macOS 13

Attachments:

Description	Flags
Gif of the issue on hover, and then a gif of what the behavior should be on focus	none
firefox and safari	none

Description Cee Chen 2023-06-26 16:12:36 PDT

Created attachment 466829 [details]
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.

Comment 1 Karl Dubost 2023-06-27 23:09:24 PDT

Created attachment 466838 [details]
firefox and safari

The behavior is the same with a narrow window or large window in both Firefox and Safari.
In a large window the text gets pushed away.

Firefox Nightly 116.0a1 (2023-06-26) (64-bit)
Safari Version 17.0 (19616.1.19)

Comment 2 Cee Chen 2023-06-28 00:49:13 PDT

Ah, rad, it sounds like this is fixed in Safari 17 based on your screenshot! Just to make sure we're on the same page, is there any chance you can confirm/repro that the bug is present on latest Safari 16 for you (but not 17)?

Comment 3 Karl Dubost 2023-06-28 01:03:38 PDT

REPRODUCIBLE: Safari Version 16.5.1 (18615.2.9.11.7)
FIXED: Safari Technology Preview Release 172 (Safari 17.0, WebKit 18616.1.17.3)

So probably something fixed it recently. 
Thanks for the bug report.

Comment 4 Cee Chen 2023-06-28 01:10:13 PDT

Fantastic, thanks for the confirmation! Looking forward to Safari 17!