Bug 196824
| Summary: | scroll-snap-type is not functioning when child element can be scrolled too | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Edwin Martin <edwin> |
| Component: | Scrolling | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED WORKSFORME | ||
| Severity: | Normal | CC: | edwin, mrobinson, simon.fraser, webkit-bug-importer, wenson_hsieh |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 12 | ||
| Hardware: | All | ||
| OS: | Unspecified | ||
| URL: | https://codepen.io/edwinm/pen/BERXpG | ||
| Bug Depends on: | |||
| Bug Blocks: | 218115 | ||
Edwin Martin
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
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/49855348>
Martin Robinson
This seems to be working for me, but feel free to reopen this if it's still an issue.