[Support request] Problem with display of background images on iOS devices

[valdaure]

Hi GeneratePress Community. I’m experiencing a strange issue with background images using Premium 1.7.7.

I am building the website on PC and all works fine when emulating different screen resolutions.

However, when viewing the website on my iPad or iPhone, the header and menu background images display correctly on the initial landing page. But if I click to any other page, the background images disappear and I have just the background color. The images are still missing even if I return to the landing page.

So in summary, background images appear on first view, but then irrecoverably disappear when the user starts navigating the site. This seems to be a problem only on iOS devices.

By way of context, the activated theme is a child them of GeneratePress. Maintenance mode is switched on. And the only custom CSS used so far is as follows (nothing too tricky):

.site-header {
height: 240px;
}

.main-title a, .main-title a:hover, .main-title a:visited {
color: #ffffff;
font-family: ‘Dosis’, sans-serif;
position: relative;
top: 130px;
}

So I’m stumped. Any ideas?

Thanks.

Michael

[Tom]

Hi there,

Your site has a coming soon page set up – can you send us login details so we can check it out?: https://generatepress.com/contact

Be sure to mention this topic 🙂

Thanks!

[Tom]

Hi there,

It seems the images are coming back as 404 errors.

I noticed that their names have multiple extensions: https://www.screencast.com/t/uthNBiVpF

For example: xmenu-bg2.jpg.pagespeed.ic.D93SLigjnx.jpg

I wonder if that’s tripping up iOS? Can you try changing the filenames?

[valdaure]

Thanks for those forensics. I see what you mean about the multiple file extensions. I certainly didn’t name the files that way, and in the WordPress Media Library the files have just one extension.

The links to the images that you provided in your forensics suggested that the Google Page Speed API was the problem, so I disabled it on my server. But the problem persists, even after deleting all cached data and files from Safari on my iPad.

Then I had a brainwave to try opening the website on my iPad with Chrome instead of Safari. Bingo — I do NOT experience the problem using Chrome.

So the problem seems to be related to Safari, which is still very annoying, given that Safari is the default browser on most iOS portable devices.

I’d appreciate your help in tracking down the problem. I’ve left your login to my website active.

Thanks.

Michael

[Tom]

I’m afraid I’m not familiar enough with Safari or the Page Speed API to know how to fix the issue, unfortunately. Is there a Page Speed API support team you can contact?

[valdaure]

Hi Tom. I have disabled Page Speed, so it should no longer be the culprit. It looks like we’re now dealing with GeneratePress background images not displaying properly in the default browser of iOS mobile devices, which seems to me to be a big deal.

Can you please test a different website that uses background images set through Customize to see if header and menu background images display properly in Safari on iPad or iPhone when navigating through different sections of the website?

What I haven’t yet tested is whether the problem can be solved by using custom CSS to set background images, instead of the Customize settings. I’ll try that tomorrow.

Thanks.

Michael

[Tom]

It looks like the values in the Customizer still have the pagespeed stuff added to them. What happens if you remove the image from the Customizer and re-add it?

[valdaure]

Okay, I discovered there was still a pagespeed Apache module running, so I have now disabled that.

As you can see here, the files are definitely named correctly and do not have multiple extensions:

https://www.falconcloud.tech/nextcloud/index.php/s/Feoqoa42cdF8RH4

I’ve been doing some digging and found that the display of background images in Safari for portable iOS devices is a known problem. I found this link to a help topic in another forum that addresses the problem. It suggests a solution, but I’m sure how to implement it in media calls for background images in headers, menus, etc.

https://help.optimizepress.com/article/479-background-image-not-showing-in-ios-mobile-safari

Given how prevalent this problem seems to be, I wonder if you could provide a workaround for it, even if it doesn’t stem directly from GeneratePress. Without a workaround, anyone viewing sites that use background images on iPhone or iPad won’t see the site properly.

Thanks.

Michael

[Tom]

Hmm, that’s really weird. I cleared my Safari browser cache and also tried a private window in Safari, and I’m still seeing the weird image extensions. Are they back on now?

Does your server have built-in caching?

Safari itself shouldn’t have any issues with regular background images in CSS.

[valdaure]

What method are you using to see these file extensions? I don’t see them. Revealing source HTML shows that the pages load correctly named files from correct path.

Also, are you using Safari on iPad or iPhone when investigating? This well-documented problem seems to be restricted to Safari on iOS mobile devices. This is important because the CSS would need to be tweaked in the @media query.

The fact that Chrome displays the pages correctly on the same mobile device seems to confirm it’s a Safari issue — a real bummer, given it’s the default browser.

You haven’t confirmed that you’re experiencing the same problem. I would have thought that you’d want your off-the-shelf theme to avoid this problem.

Can you provide a link to another website hosted on a different server which uses background images set through Customize so that I can test whether the issue is related somehow to my Plesk server on AWS?

I will now also use a different theme with background images to see if this is a general problem or one related to GeneratePress.

Thanks.

Michael

[valdaure]

The weirdest thing has happened. I woke up this morning to find the pages are now displaying correctly. The only thing I can think of is that disabling the Jetpack images caching service took a while to propogate out of the ether. I’m loathe to turn it back on to see if the problem comes back.

So it looks like I’m back in business. But it’s annoying to not know what the real source of the problem was. Jetpack really shouldn’t wreak this kind of havoc.

Thanks for your help. Perhaps I’ll leave the topic open until I’m sure the problem has been solved.

Thanks again.

Michael

[Tom]

Glad it started working.

I was noticing the issue in Safari – I was checking the image URLs using the developer tools (right click + Inspect). I just checked now and it’s working as expected.

Our backgrounds module is one of our more simple modules – all it does it write the background image CSS for you.

It sounds like there was caching in place, which is why we didn’t see the fix right away.

Thanks!

[Author]

Posts