Streaming live at 10am (PST)

Elements appear invisible on IOS 14

Hello,

I am experiencing an issue while testing my live site on iPhone 11 Pro on Safari, Chrome, and Firefox. The device is running IOS 14.

Some of the content on the page is not visible. Invisible content will load after being highlighted, and the previously visible content will then disappear. It appears that it will only load enough content to fit 100VH at a time, regardless of the position of the visible elements.

I am stumped. I attempted to play around with overflow, z-index, and hidden toggle with no success. I am having trouble finding answers online, any support is greatly appreciated.

Video of issue: https://streamable.com/ye8ysf


My Read-Only Link

I have found a solution. On the divs that were loading incorrectly, I changed the position property from relative to sticky with all sides set to auto.

▽☐Relative Section
┃▽☐Sticky Div (top 0px, rest auto)
┃┃▽☐Absolute Div (all 0px)
┃┃┃▽☐Relative Div a (Background image)
┃▷☐Relative Div b (changed to position sticky)
┃▷☐Relative Div b (changed to position sticky)
┃▷☐Relative Div b (changed to position sticky)

It appears that using relative divs that overlapped an absolute div that is nested in a sticky div was causing my issue. I am still looking into why this is the case on IOS.

Edit: Added more info