Hi all,
Had a weird issue yesterday that has since been resolved, but I’m still trying to figure out what happened.
I’ve been working on a site to add a custom search filter that utilizes a combination of tags and conditional statements to allow users to filter by size. The new filter works, but I ran into an issue on mobile as the number of size options was too long and the theme was set to hide overflow.
As part of this fix, I modified a CSS class to “overflow-y: scroll” and this took care of the issue. I tested the changes on my desktop (using Chrome developer tools to view on mobile) as well as my iPhone 12.
Everything looked fine, but when the client loaded the site on his device, iPhone 10 on iOS 14, the hero image on the homepage would not load as well as a floating menu button. This happened in both Chrome and Safari on his device. Every other image loaded perfectly fine.
After a bit of sleuthing, I decided to apply the aforementioned styling directly on the element as opposed to the CSS class. For whatever reason, this fixed the issue on his device.
So…what could have happened? I want to say this might have been a browser issue, but the issue happened on both Safari and Chrome. Do different versions of iOS factor into this?