Skip to content

fix(alr): prevent element hiding on iOS 18 Safari with Automatic Lazy Rendering - #8580

Open
faisalahammad wants to merge 1 commit into
wp-media:developfrom
faisalahammad:fix/8574-safari-ios18-alr
Open

fix(alr): prevent element hiding on iOS 18 Safari with Automatic Lazy Rendering#8580
faisalahammad wants to merge 1 commit into
wp-media:developfrom
faisalahammad:fix/8574-safari-ios18-alr

Conversation

@faisalahammad

Copy link
Copy Markdown
Contributor

Summary

On iOS 18, Safari enables CSS content-visibility by default. When ALR applies content-visibility: auto to [data-wpr-lazyrender] elements, Safari on iOS 18 can fail to render those elements after scrolling.

Fixes #8574

Changes

Controller.php

Added two CSS properties to the ALR inline stylesheet:

  1. contain-intrinsic-size: 0 0 — standard CSS companion for content-visibility, provides size hint before rendering
  2. @supports (-webkit-touch-callout: none) — targets iOS Safari specifically, overrides content-visibility to visible

Before:

[data-wpr-lazyrender] {content-visibility: auto;}

After:

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

Testing

  1. Enable ALR in WP Rocket settings
  2. Open a page with below-fold content on iPhone/iPad with iOS 18 Safari
  3. Scroll down — footer/sections should render normally
  4. Verify no regression on desktop browsers (Chrome, Firefox, Safari)
  5. Verify no regression on Android Chrome

… Rendering

- Add contain-intrinsic-size: 0 0 to content-visibility rule
- Add @supports override for WebKit touch devices (iOS Safari)
- Fix missing rocket_bypass stub in unit test

On iOS 18, Safari enables CSS content-visibility by default. When ALR
applies content-visibility: auto to [data-wpr-lazyrender] elements,
Safari on iOS 18 can fail to render those elements after scrolling.
The contain-intrinsic-size property provides a size hint for elements
with content-visibility. The @supports (-webkit-touch-callout: none)
override specifically targets iOS WebKit browsers where the rendering
bug occurs.

Fixes wp-media#8574
@codacy-production

Copy link
Copy Markdown

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

1 participant