Bug 249575 - Safari 16.2 broken by some Flex/Snap CSS
Summary: Safari 16.2 broken by some Flex/Snap CSS
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: New Bugs (show other bugs)
Version: Safari 16
Hardware: All All
: P2 Blocker
Assignee: Nikos Mouchtaris
URL: https://radogado.github.io/n-carousel...
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-12-19 04:48 PST by Rado
Modified: 2023-01-19 10:27 PST (History)
6 users (show)

See Also:


Attachments
Safari 16.2 vs previous versions (1.81 MB, image/png)
2022-12-19 04:48 PST, Rado
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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.