Bug 196824 - scroll-snap-type is not functioning when child element can be scrolled too
Summary: scroll-snap-type is not functioning when child element can be scrolled too
Status: RESOLVED WORKSFORME
Alias: None
Product: WebKit
Classification: Unclassified
Component: Scrolling (show other bugs)
Version: Safari 12
Hardware: All Unspecified
: P2 Normal
Assignee: Nobody
URL: https://codepen.io/edwinm/pen/BERXpG
Keywords: InRadar
Depends on:
Blocks: 218115
  Show dependency tree / graph
 
Reported: 2019-04-11 12:15 PDT by Edwin Martin
Modified: 2021-01-20 07:28 PST (History)
5 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Edwin Martin 2019-04-11 12:15:37 PDT 
Overview:

Codepen to demonstrate this bug:
https://codepen.io/edwinm/pen/BERXpG

1) Horizontal scrolling with scroll-snap-type works fine
2) When child elements itself can scroll vertically, scroll-snap-type in parent element does not work anymore.

In Codepen, toggle scrolling of child elements (line 25 in CSS) to see effect on scroll-snap-type in parent element.

Steps to Reproduce:

- Open Codepen
- Swipe horizontally

Actual Results

- scroll-snap-type does not work, columns with different colors stay visible

Expected Results:

- scroll-snap-type does work, element scrolls to position with only one column of only one color visible.

Build Date & Hardware:

Safari 12.1 on macOS 10.14.4
Safari on iOS 12.2

Additional Builds and Platforms:

-

Additional Information:

Works in macOS Chrome 73.0.3683.103
Comment 1 Radar WebKit Bug Importer 2019-04-12 10:28:50 PDT 
<rdar://problem/49855348>
Comment 2 Martin Robinson 2021-01-20 07:28:31 PST 
This seems to be working for me, but feel free to reopen this if it's still an issue.