Bug 186887 – Setting Height to Auto on overflow hidden element isn't visible when overlapping lower z level

• Status: NEW
• Component: CSS

[Dave]

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.

[Dave]

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