Bug 249575

Summary:

Safari 16.2 broken by some Flex/Snap CSS

Product:

WebKit

Reporter:

Rado <rado>

Component:

New Bugs

Assignee:

Nikos Mouchtaris <nmouchtaris>

Status:

RESOLVED FIXED

Severity:

Blocker

CC:

ahmad.saleem792, ntim, rado, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 16

Hardware:

All

OS:

All

URL:

https://radogado.github.io/n-carousel/safari-16.2/

Attachments:

Description	Flags
Safari 16.2 vs previous versions	none

Description Rado 2022-12-19 04:48:03 PST

Created attachment 464101 [details]
Safari 16.2 vs previous versions

On Safari 16.2+ (including TP), when using the following combination of CSS

.n-carousel__content {
  display: flex;
  scroll-snap-type: both;
  width: 0;
  height: 0;
  overflow: auto;
}

.n-carousel__content > * {
  scroll-snap-align: center;
  width: 100%;
}

the browser breaks, saying “This webpage was reloaded because a problem occured. A problem repeatedly occured with index.html”

The CSS snippet is reduced from https://nativecarousel.com

Now multiple sites don't work on latest Safari on all devices. Please fix it. Thanks

Comment 1 Rado 2022-12-19 08:17:52 PST

Fixed by changing 'scroll-snap-type: both' to a pair of 'x' and 'y' lines

Comment 2 Sam Sneddon [:gsnedders] 2022-12-19 08:31:54 PST

rdar://103517033

Comment 3 Rado 2022-12-19 22:39:50 PST

Broken version saved as https://radogado.github.io/n-carousel/safari-16.2/

Comment 4 Rado 2023-01-12 23:15:08 PST

Happens in TP 161

Comment 5 Nikos Mouchtaris 2023-01-18 15:53:15 PST

Pull request: https://github.com/WebKit/WebKit/pull/8800

Comment 6 EWS 2023-01-19 10:26:58 PST

Committed 259095@main (ca36a0985064): <https://commits.webkit.org/259095@main>

Reviewed commits have been landed. Closing PR #8800 and removing active labels.