Overflow: scroll element cannot slide on IOS Safari browser

Time:2020-10-27

describe

This bug needs the following conditions: the parent element needs to use absolute positioning absolute or fixed positioning fixed, use overflow: scroll / Auto (or overflow-y: scroll / auto), and the inner child element is of dynamic size (such as large SVG document, approximately embedded iframe, etc.).

The reason for the bug: there is no official document describing the bug. When referring to the documents and testing by yourself, I summarized the following:IOS Safari will recognize the element of overflow: scroll as a separate Scrollview and give it a WebKit overflow scrolling attribute of auto. In Safari, the web page itself is a large Scrollview. If the height of the sub element is not determined before the establishment of the Scrollview, the internal sliding will not be triggered, but the external sliding will be triggered.

About – WebKit overflow scrolling: Safari CSS reference officially describes this:

Specifies whether to use native-style scrolling in an overflow:scroll element.

That is, this attribute will make the elements of overflow: scroll slide smoothly as IOS native. In order to achieve this goal, Safari creates a Scrollview for all elements of overflow: scroll. When the – WebKit overflow scrolling attribute is touch, hardware acceleration is enabled and smooth effect appears.

analysis

  1. There is no such bug when the parent element is not detached from the document stream.
  2. If the parent element does not specify – WebKit overflow scrolling: touch, it will not slide.
  3. When the inner element is a normal HTML element, there is no such bug.
  4. When the overflow attribute is reset for the parent element, Safari may rebuild the Scrollview and the bug will disappear. (the previous version of the laboratory used this method, but the new overseas version can not use this method fix, so it is possible)

resolvent:

According to the above analysis and a large number of tests, the perfect solution is as follows:

  1. The attribute WebKit overflow scrolling: touch must be added to all overflow: scroll elements on the mobile side.
  2. Do not leave the document stream when the parent element cannot be detached from the document stream.
  3. After the child element iframe is loaded, the overflow: scroll attribute of the parent element can be overridden asynchronously (this method may not succeed).
  4. If the above problems are not solved, a min height is given to the child element, which is not limited in size (slightly larger than the best), to help Safari create a Scrollview.

to update

The underlying cause of this problem has been found. For details, please refer to: overflow: scroll element cannot scroll on IOS Safari browser. For further details, please refer to