Good morning. I have a strange display issue on two pages of my website but only when running on small devices that force vertical navigation. Both pages display the same issue. I’m running the latest versions of Backlight 6 for all modules. Here are the two pages:
https://www.michaelblanchette.com/shop/
https://www.michaelblanchette.com/about/
These two pages contain more text than any other pages, with an image at top. When under vertical navigation (ie on iPhone in my case), these pages display properly for about one second, and then transform into a page with a white background with no image and the name of the Backlight page at the top. I’ve tried removing the photo to see if that was the issue but that does not change the outcome. I also double-checked the HTML to see if there might be an obvious typo, but found nothing.
All of this works as expected on desktops – the issue only appears on small form-factor devices like phones or tablets. Any ideas?
Mike Blanchette
Hi Mike,
I just checked with my iPhone 16 Pro Max and both pages look fine
Well, that’s weird. I’m using an iPhone 13 but I’ll try others to see if the same problem exists.
Ok, so it doesn’t appear to be related to vertical navigation like I suspected. It seems to have to do with Safari. My main browser is Chrome and it all looks fine there. But when I look at it on Safari, those two pages are not rendered properly. I can see this on my desktop as well so it has nothing to do with small devices but perhaps with some browser incompatibility?
I was looking on Safari iOS on my iPhone
I’m wondering if it depends on the Safari version. I looks fine on my wife’s iPhone but she’s not running the latest version of Safari. I’m running the latest and see the problem. Also see it on my desktop with latest update. It looks to me like they may have introduced some kind of incompatibility. I’ve tried a number of changes to page content but nothing works. It displays the correct page for a second, and then overlays it with another version on a white background and the name of the template at the top of the page.