Elements don't appear in Safari on iOS 18 when Automatic Lazy Rendering is enabled

[johan-las]

Describe the bug
It’s not always the case, but you might find that an Element doesn’t show up in Safari on iOS 18 if you have Automatic Lazy Rendering turned on.

I found that on iOS 18, the CSS Content Visibility feature is turned on in Safari’s advanced options, whereas in previous iOS versions, it was turned off.

We can't add a global exclusion since the ID element is too generic in the case concerned.

Adding the following CSS to the page also fixes the issue, but that would disable it from all Safari mobile:

@supports (-webkit-touch-callout: none) {
    [data-wpr-lazyrender] {
        content-visibility: visible !important;
    }
}

To Reproduce
Steps to reproduce the behavior:

1. Go to a reported site with the issue
2. Open it with iPhone on iOS 18
3. Scroll down to the bottom
4. See that the footer section is hidden

Expected behavior
This is not supposed to happen, it is an automatic feature and it is not easy for a customer to fix it by themself.

Smartphone (please complete the following information):

• Device: iPhone 16
• OS: iOS 18
• Browser: Safari

Additional context
Slack: https://group-onecom.slack.com/archives/C08EFUGUH5G/p1782828383250599
Ticket: https://onecomhelp.zendesk.com/agent/tickets/17861292