Bug 186887 - Setting Height to Auto on overflow hidden element isn't visible when overlapping lower z level
Summary: Setting Height to Auto on overflow hidden element isn't visible when overlapp...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Other
Hardware: iPhone / iPad iOS 11
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2018-06-21 04:19 PDT by Dave
Modified: 2018-06-24 09:19 PDT (History)
2 users (show)

See Also:


Attachments
reproduction sample html page (2.90 KB, text/html)
2018-06-21 04:19 PDT, Dave
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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