[iOS] -webkit-overflow-scrolling: touch causes content to disappear

• Component: Layout and Rendering
• Status: RESOLVED FIXED

I've created a minimal example to demonstrate this issue, located here: 

https://jsfiddle.net/booc0mtaco/kyekqjrL/

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.

[Radar WebKit Bug Importer]

<rdar://problem/32546124>

[Simon Fraser (smfr)]

Created attachment 311898 [details]
Slightly reduced test case

[Simon Fraser (smfr)]

This is gnarly. Seems to involve opacity transitions, nested scrollers, and dynamic hide/show.

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.

[Andrew H]

Combing thru my open OSS bugs and it appears this might be fixed in the latest webkit on iOS (13.1)

[Simon Fraser (smfr)]

Thanks for checking!