Bug 186887

Summary: Setting Height to Auto on overflow hidden element isn't visible when overlapping lower z level
Product: WebKit Reporter: Dave <dave>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: simon.fraser, zalan
Priority: P2    
Version: Other   
Hardware: iPhone / iPad   
OS: iOS 11   
Attachments:
Description Flags
reproduction sample html page none

Description Dave 2018-06-21 04:19:20 PDT
Created attachment 343235 [details]
reproduction sample html page

view code at https://codepen.io/anon/pen/VdXVOd or see attached page. View on iOS device.

Seems to be an issue where relative items within a parent that has overflow hidden aren't painted at all. This only happens when setting the height of the container to auto, from 0 through javascript. The container is correctly calculated in terms of height, but it's contents aren't painted. 
This also seems oddly related as to whether the bounds of it's parents overlap an item at a different z-index.
Code works as expected when the divs don't overlap an element at a lower z-index, but aren't repainted when the bounds overlap a lower z-index item.


Steps to reproduce
1. view attached code on iOS Device
2. click small spacer button to set spacer to small
3. toggle show hide. 
 
expected result - absolute div bounds isn't overlapping the fixed red square so text "Relative Item" appears.

4. click large spacer button to set spacer to large (overlapping fixed red square at z level 1)
5. toggle show hide. 

expected result - absolute div bounds now overlaps the fixed red square at z1. but the "Relative Item" element isn't repainted so remains hidden, even though it's containing div has expanded to the correct height.
Comment 1 Dave 2018-06-24 09:19:07 PDT
please also suggest any workarounds for this. 

I've noted padding-bottom:1px on the height:0/auto element seems to work in the sample.

But not in all real world situations