I'm developing a small word game (https://meso-puzzle.com/) and it works great on most devices, but I'm having issues with iOS compatibility. Specifically, when I test it on the iPhone 11, I can swipe left and right even though there's no content outside the visible area. Also, when I swipe right, the page seems to snap in such a way that about 10% on the left side goes off-screen. This problem occurs in both Safari and Chrome on the iPhone, but it doesn't happen on other devices like the Google Pixel 7 or my PC. Does anyone have any idea what might be causing this? Thanks for any help!
1 Answer
Sounds frustrating! iOS has been known to behave strangely at times. It might be related to some CSS you're using. I took a quick look and if you're using 'zoom: 0.9;' on your html or body, that could lead to viewport issues. Try switching that out for a CSS transform scale instead, and also consider adding 'overflow-x: hidden;' and 'max-width: 100%;' to your CSS. This could help with the snapping problem!
Thanks for the tip! I actually overlooked that CSS rule. I removed it and applied your suggestions, and it seems to have fixed the issue on my PC and Android. I'll check if it resolves the iOS issue later!