Imagine the following HTML structure, where the scrolling container has overflow-y: scroll
:
+--scrolling container+-+
| |
| +-child element+----+ |
| | ++iframe++ | |
| | | | | |
| | | | | |
+-----------------------+
| | | | <-- actually cut off by
| +--------+ | <-- scrolling container
+-------------------+
The issue: On iOS, the child element cannot be scrolled when grabbing the iframe (i.e. putting your finger somewhere on the iframe).
Solution
You need to add -webkit-overflow-scroll: touch
on the element that has overflow:scroll, i.e. the scrolling container. This activates "momentum scrolling" for this container, but also fixes the iframe scrolling issue.
Posted by Dominik Schöler to makandra dev (2017-04-28 14:07)