Solved: Element inside overflow:scroll container cannot be scrolled on iOS when dragged by a contained iframe

Updated . Posted . Visible to the public.

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.

Dominik Schöler
Last edit
Henning Koch
License
Source code in this card is licensed under the MIT License.
Posted by Dominik Schöler to makandra dev (2017-04-28 14:07)