Bug 283907 – Footer element doesn't get rendered/displayed/painted properly on iOS Safari on a specific site

• Status: NEW
• Component: Layout and Rendering

[Eliad T]

Created attachment 473420 [details]
Bug demonstration

Hello,
On this specific website (https://supportqa-h.wixstudio.io/tb-10422), when loading it on Safari IOS and scrolling to the very bottom, the footer element doesn't get rendered properly, although it has a correct CSS properties that shouldn't be preventing it from being displayed (i.e. no display: none or visibility: hidden or some out of bounds top/bottom/left/right values). Here are some more weird quirks that I've observed:

- Sometimes if you scroll fast enough, it will render/display properly.
- When observing the DOM tree, at times the <footer></footer> element is missing in the DOM structure, yet when I look for it using document.querySelector('footer'), it queries correctly but cannot be found in the DOM tree.
- The weirdest one yet - if I toggle ANY CSS property in the DOM tree via the dev tools, the footer element will "re-appear" on the page. I'm guessing that some style recalculation operation is "fixing" the actual DOM painting of the element?
- Seems like updating to > iOS 18 makes it re-create less or at least it gets reproduced partially (i.e. when entering the view port the buggy behavior persists, but scrolling to the very bottom renders/paints it properly).
- Observation from our QA: there is a banner element that is sticky to the bottom of the page and to the top of the footer. Disabling the sticky property for that element causes the bug to not re-create anymore.

Steps to reproduce:
- Open the above linked site in a Safari iOS, preferably version < 17.
- Scroll to the down, and when close to the very bottom, scroll slowly down.
- At the very bottom there should be a footer element, but if the bug got re-created successfully, it will be missing.

If anything else is missing in this report please let me know, as this is my first time opening a bug report ticket here :)

Thank you in advance,
Eliad

[Eliad T]

Created attachment 473421 [details]
Expected result

[Eliad T]

Created attachment 473422 [details]
Actual result

[Alexey Proskuryakov]

Thank you for the report. Could you please clarify what the expected vs. observed behavior is on iOS 18? We cannot do anything about releases that have already shipped, and I'm not sure if I'm successfully reproducing any problem on iOS 18.

[Eliad T]

Hey Alexey, thank you for the quick reply. On iOS 18 the bug is a bit trickier to reproduce as was observed in iOS 17, as it seems like it was mostly patched. However, what I did notice is that when I scroll and the footer element enters the viewport, initially it is not painted/rendered as the other sections and elements, and only until I completely scroll to the bottom does it renders/paints correctly. I'll attach a screen recording to demonstrate the issue on iOS 18.

[Eliad T]

Created attachment 473438 [details]
Bug reproduction on iOS 18

[alan]

Created attachment 473440 [details]
screen recording -macOS

I can repro this on trunk WebKit on macOS. It looks flaky where in some cases the bottom content does not get painted until after the user interacts with the content (in the screen-recoding I click on the body to make it visible)

[Radar WebKit Bug Importer]

<rdar://problem/141149897>

[Karl Dubost]

I can NOT reproduce on iOS 18.1.1 (22B91)
And I can NOT reproduce on internal versions.

[Karl Dubost]

I also tried on Chrome on Android and I can NOT reproduce there. 
But there is probably a little difference on iOS Safari, the image takes longer time to appear.
On Chrome Android it's immediate.