Website has some issues on mobile
benmajor opened this issue · 22 comments
When visiting the website on a mobile device (specifically iPhone 13 Pro Max using Chrome), there seems to be an issue with the menu overlay.
The overlay seems to be shown by default, and attempts to dismiss it (i.e. tapping in the overlay) just reveal the menu. Screenshots as follows:
Hi, thanks for reporting.
Have to look into this....
No problem, I've had a quick look, but couldn't see the exact cause. Interestingly, using Chrome Dev Tools on desktop seems to overflow the main container, so I suspect the issue lies somewhere there.
Is it better now?
No, sadly not. It's still exhibiting the same behaviour.
if has something to do with code in mobile.js
function iOS() {
var iDevices = [
'iPad Simulator',
'iPhone Simulator',
'iPod Simulator',
'iPad',
'iPhone',
'iPod'
];
if (!!navigator.platform) {
while (iDevices.length) {
if (navigator.platform === iDevices.pop()){ return true; }
}
}
return false;
}
if (iOS()) {
document.querySelector('.wrapper').style = '-webkit-transform: translate3d(0,0,0);';
}
When the .wrapper is styled like this, the observed appearance takes place.
Ok, that might be helpful, thanks
Sorry for this. Ok, I changed the script to also check for Safari, this was obviously a fix for iOS/Safari.
Unfortunately I don't have any Apple/iOS products myself so it's hard to test for me. This is why I use these ugly fixes, if I had a test device I would have fixed the CSS itself, but now I have to rely on 3rd party fixes.
Does it work now, or does it still have the issue? I now check for the word Safari in the userAgent string. Awful, but the only way, without any test device.
Are you able to post the website into a repo? I'm happy to take a look at a possible fix.
Does it work now, or does it still have the issue? I now check for the word Safari in the userAgent string. Awful, but the only way, without any test device.
I don't think that the check for Safari is the issue here, as the issue persists in Chrome, too. Sadly, it doesn't appear to have resolved the issue at least.
Does it work now, or does it still have the issue? I now check for the word Safari in the userAgent string. Awful, but the only way, without any test device.
I don't think that the check for Safari is the issue here, as the issue persists in Chrome, too. Sadly, it doesn't appear to have resolved the issue at least.
Not the check for Safari, but setting the style of .wrapper to -webkit-transform: translate3d(0,0,0)
Does it work now, or does it still have the issue? I now check for the word Safari in the userAgent string. Awful, but the only way, without any test device.
I don't think that the check for Safari is the issue here, as the issue persists in Chrome, too. Sadly, it doesn't appear to have resolved the issue at least.
Not the check for Safari, but setting the style of .wrapper to -webkit-transform: translate3d(0,0,0)
Yes, but that style will only be applied if Safari is detected in the new JS file. Maybe hard refresh?
I tested the site with a user agent switcher and set the user agent to Chome on iOS. The translate3d-fix for iOS/Safari that causes the issue is no longer applied over here.
I've cleared the cache and on iPhone 11 iOS 15.3.1 with Safari I am getting the same result as benmajor's screenshot above.
On a desktop Mac using Safari's "Responsive Mode" from the "Developer" menu the menu overlay does not appear (as well as the logo does not appear in the upper right edge), but that is due to the fact that navigator.platform returns "MacIntel" there. May vary with M1 Macs.
Okay, for now I just disabled the Safari-fix, that seems to break things in both Safari and Chrome. I hope this improves the user experience somewhat. I tested it in app.lambdatest.com and it seems to work.There is no menu button in the upper corner though, but there is a menu page as a fallback. Not sure what causes these issues on iOS devices. However, testing is quite hard. Even with lambdatest. I can barely scroll in the iPhone and the test system is very slow.
One can tap on upper right corner to get the menu, although it would not win a prize as intuitive user experience ;-)
I +1 benmajor for asking to put the site in a repo. I am also willing to have a look at it.
Okay, the issue seems to stem from the fact that the menu button has been defined in an ::after element, I rewired this. The experience must be better now.
I can confirm this works well on iPhone Safari now.
I also like to thank you @gabordemooij – I am using RB since version 3 in almost all PHP projects with database needs.