Bug 258354

Summary:

Negative margin causes overflow in nested flex scroll container

Product:

WebKit

Reporter:

Lennard Scheibel <webkit-bugzilla>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

karlcow, sgill26, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 16

Hardware:

Mac (Intel)

OS:

macOS 13

Bug Depends on:

Bug Blocks:

292022

Attachments:

Description	Flags
Minimal reproduction showing the bug. Red area is not visible when opened in Chrome or FF.	none
rendering in safari, firefox, edge, chrome	none
after scrolling rendering in safari, firefox, edge, chrome	none

Lennard Scheibel

Reported 2023-06-21 07:00:51 PDT

Created attachment 466777 [details] Minimal reproduction showing the bug. Red area is not visible when opened in Chrome or FF. When creating a scrolling container with "overflow: scroll; display: flex; padding: 10px" and adding a child node with "flex-grow: 1; margin: -10px", Safari allows the user to scroll horizontally, where Chrome and FF don't. The attachment contains a minimal reproduction. It should show how in Safari the green "Content" overflows on the x-axis, although its width should not be larger than its parent's width. Next to Safari 16, this behavior can also be observed with the build 265350@main from JUNE 21, 2023 AT 02:27 PM GMT+2. The closest I could find was https://bugs.webkit.org/show_bug.cgi?id=218579.

Attachments
Minimal reproduction showing the bug. Red area is not visible when opened in Chrome or FF. (218 bytes, text/html) 2023-06-21 07:00 PDT, Lennard Scheibel	no flags	Details
rendering in safari, firefox, edge, chrome (283.46 KB, image/png) 2023-06-21 19:48 PDT, Karl Dubost	no flags	Details
after scrolling rendering in safari, firefox, edge, chrome (274.21 KB, image/png) 2023-06-21 19:50 PDT, Karl Dubost	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Karl Dubost

Comment 1 2023-06-21 19:48:30 PDT

Created attachment 466788 [details] rendering in safari, firefox, edge, chrome So I can't reproduce with Safari Version 17.0 (19616.1.18) with 265385@main JUNE 22, 2023 AT 11:10 AM GMT+9 https://webkit.org/build-archives/#mac-ventura-x86_64%20arm64

Karl Dubost

Comment 2 2023-06-21 19:49:14 PDT

ha sorry, you need to scroll. Indeed I can reproduce once scrolling.

Karl Dubost

Comment 3 2023-06-21 19:50:03 PDT

Created attachment 466789 [details] after scrolling rendering in safari, firefox, edge, chrome

Radar WebKit Bug Importer

Comment 4 2023-06-21 19:50:37 PDT

<rdar://problem/111137750>

Note You need to log in before you can comment on or make changes to this bug.