Bug 172875 - [iOS] -webkit-overflow-scrolling: touch causes content to disappear
Summary: [iOS] -webkit-overflow-scrolling: touch causes content to disappear
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 10
Hardware: All iOS 10
: P2 Normal
Assignee: Nobody
URL: https://jsfiddle.net/booc0mtaco/kyekq...
Keywords: InRadar
Depends on:
Reported: 2017-06-02 15:06 PDT by andrew.holloway
Modified: 2019-09-28 04:02 PDT (History)
7 users (show)

See Also:

Slightly reduced test case (2.25 KB, text/html)
2017-06-02 19:47 PDT, Simon Fraser (smfr)
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description andrew.holloway 2017-06-02 15:06:32 PDT
I've created a minimal example to demonstrate this issue, located here: 


STEPS to reproduce:

1) open the linked JSFiddle and view the content in MobileSafari
2) click on the header "click to reveal"
3) note that content is visible
4) attempt to scroll to the right

**Expected behavior: the content will scroll smoothly, making use of the prefixed tag for smooth scrolling.

**Actual behavior: the container will vanish.

They are still in the DOM , and in the right locations. Closing and reopening the section also restores them to visible until the next scroll is made.

Removing the prefixed property `-webkit-overflow-scrolling` fixes the behavior, but makes the scroll work as it used to and becomes sticky. Also, removing some of the other properties will fix the symptoms intermittently.

In most cases, triggering any DOM change or style change adjacent to the vanished element will trigger a repaint, and the content will become visible.
Comment 1 Radar WebKit Bug Importer 2017-06-02 15:24:53 PDT
Comment 2 Simon Fraser (smfr) 2017-06-02 19:47:16 PDT
Created attachment 311898 [details]
Slightly reduced test case
Comment 3 Simon Fraser (smfr) 2017-06-02 19:47:42 PDT
This is gnarly. Seems to involve opacity transitions, nested scrollers, and dynamic hide/show.
Comment 4 andrew.holloway 2017-06-05 10:33:30 PDT
Thanks for cleaning that up. As you probably saw, removing any one of those will cause the proper repainting. 

One note for reference. In one iteration of testing, I noticed that setting the end-transition opacity to .99 or lower seemed to fix it. Not sure if stacking context might also be involved.
Comment 5 Andrew H 2019-09-27 00:07:24 PDT
Combing thru my open OSS bugs and it appears this might be fixed in the latest webkit on iOS (13.1)
Comment 6 Simon Fraser (smfr) 2019-09-28 04:02:41 PDT
Thanks for checking!