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

makandra.de

Say thanks1

Last edit

2017-05-08

Henning Koch

License

Source code in this card is licensed under the MIT License.

Async control flow in JavaScript: Promises, Microtasks, async/await

Slides for Henning's talk on Sep 21st 2017.

Understanding sync vs. async control flow

Talking to synchronous (or "blocking") API

print('script start')
html = get('/foo')
print(html)
print('script end'...

Delivering Carrierwave attachments to authorized users only

Preparation

To attach files to your records, you will need a new database column representing the filename of the file. To do this, add a new migration (rails g migration <name>) with the following content:

class AddAttachmentToNotes...

Posted by Dominik Schöler to makandra dev (2017-04-28 14:07)

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

Solution

Related cards:

Understanding sync vs. async control flow

Talking to synchronous (or "blocking") API

Summary

Introduction

Preparation