Scrolling does not work for iframe inside dialog in iOS

Created on 13 September 2017, about 7 years ago
Updated 10 September 2023, about 1 year ago

What are the steps required to reproduce the bug?
Open a "dialog" which contains an iframe which overflows the height of the dialog using iOS 8+ Safari (replicated in iOS 10 on an iPad Pro).

This issue was originally noticed when using Entity Browser (see https://www.drupal.org/node/2781873 ). This uses an iframe inside a dialog which, on iOS, is not scrollable. You therefore can't view all the items in the browser or use the submit buttons at the bottom.

What behavior were you expecting? To be able to scroll the dialog iframe as you would on a desktop device.

What happened instead? Could not scroll the iFrame (although if you select the very edge of the dialog you can scroll), whole page attempts to scroll instead.

---

Adding -webkit-overflow-scrolling: touch; to the dialog content fixes this issue. It also enables iOS's momentum scrolling for that element (patch to follow).

🐛 Bug report
Status

Needs review

Version

1.0

Component

Code

Created by

🇬🇧United Kingdom a.hover

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024