Hi there,
i dont know if much users here use WPRocket with PRO.
Since a few weeks i have some strange problems:
Sometimes the footer does not render on Iphones, somehow this Bug seems related to Iphones and Safari.
So i talked to wprocket, because when diasbling the plugin => footer did render normall on iphone.
They think they found the problem, or a combination of them:
- automatic lazy rendering optimization
- the new css property: content-visibility
So they wrote a short code-snippet so this does work again:
function wpr_alr_exclusions( $exclusions ) {
$exclusions[] = 'x-colophon';
return $exclusions;
}
add_filter( 'rocket_lrc_exclusions', __NAMESPACE__ .'\wpr_alr_exclusions' );
Now is the question if something in PRO changed, or is it just related to wprocket.
@charlie should i make a staging site where we have this problem, and send the credentials so you can also have a look?
I talked to them and i will paste the last 2 E-Mails here:
13.03.2025:
I think it may be some combination of 2 things:
1) The Automatic Lazy Rendering optimization is fairly new. It was introduced in WP Rocket version 3.17, which was released in September of 2024.
2) If the issue only started happening in recent days or weeks, then that brings to mind the second potential part of the issue, which is that there are issues with the fairly new CSS property content-visibility .
That’s the way that the Automatic Lazy Rendering optimization is applied. It’s essentially just a small bit of CSS we add like this:
[data-wpr-lazyrender] {content-visibility: auto;}
Then it’s applied to elements on your pages by having the following attribute added:
data-wpr-lazyrender=“1”
It’s applied to elements that are lower on your pages (like footers), and it makes it so the elements are not loaded in the browser until the visitor scrolls down. It’s basically like lazy loading images, but it’s for the other elements on your pages.
The optimization is basically just on or off. It’s either applied to elements or not. The helper plugin and code snippet I sent you removes the optimization from the footer.
About why it causes the footer to not display, all the reasons are not fully known. We do know that some specific other CSS styles often don’t work well with this optimization applied, such as position:absolute; , but that’s just one specific one we know of.
From your theme’s side of things, you could potentially share with them an example of a page where the issue is happening while the optimization is applied, and it’s possible they could test making changes to how the footer is styled to allow the optimization to be applied without causing the issues in the Safari browsers.
I can’t know what specific changes might need to be made, though.
Best regards,
17.03.2025:
Sharing this with the theme developers could certainly be helpful. It’s possible they might be interested in making a change so that the Critical Images optimization could still be applied while not causing the issue (apparently primarily for iOS devices).
It’s a bit of a complicated issue, so you might want to do the following to help them:
• Temporarily undo the helper I applied and wait for the footer issue to happen again for your home page. You can try alternating refreshing the page on your iPhone and clearing the cache, as this optimization has to be applied in stages.
• Once the issue is happening again, find the related mobile cache file within /wp-content/cache/wp-rocket/aie.wine/ and save a copy. It should be named index-mobile-https.html .
• Reactivate the helper plugin to once again fix the issue on your site.
• Share the saved cache file with your theme developers so they can see the page exactly as it is when the issue is occurring.
• Let them know they should check specifically the footer element with the class of x-colophon and see the data-wpr-lazyrender="1" attribute applied.
• They can also check for this inline style:
[data-wpr-lazyrender] {content-visibility: auto;}
This is how the optimization is applied to the element. My hope is that if they can see that it’s applied and can also reproduce the issue on their end when they test with iOS devices, they might be able to make a change to how they style the footer so that the optimization doesn’t cause the footer to disappear.
The main thing you would need to do on your end is to get the issue reproduced and save the related cache file to share with the theme developers.
From there, you could probably copy and paste the above (and maybe some parts of our previous messages) so they understand what the issue is.
I am also happy to answer any questions they might have as well.
Best regards,
Thanks in advance for your help!