0

I found an issue that occurs with iphone and iMac using Safari, running on Magento v2.3.1

Steps to reproduce the problem:

1. Visit webpage with iPhone/iMac with Safari browser
2. Tap on Responsive Menu 
3. Responsive Menu Opens 
4. Tap on Category (i.e "How to buy" in my case), the background page shifted up unexpectedly (see the second screenshot attached below, yellow bordered)
(expected result: the background page should remain as top position)

Any clue to fix this problem? thanks.

enter image description here enter image description here

|improve this question
0

This is how Safari handles position:fixed on the body tag, in typical Apple fashion it works completely differently to every other browsers. This is a common fix to stop the background scrolling as the user scrolls down the navigation.

To stop this behaviour remove position: fixed from the body and height: 100% from html when the category is tapped on, but make sure you test on iOS Safari that the UX is not impacted otherwise your users may end up with an even worse experience.

enter image description here enter image description here

|improve this answer
  • It works, thanks Ben. – Victor Leung Jul 23 '19 at 11:20
  • Glad to see it works :) Can you mark this as the accepted answer please @VictorLeung? It's a tick/checkmark icon to the left of my answer. – Ben Crook Jul 23 '19 at 12:18
  • I voted up actually but I don't have enough reputation (seem at least of 15) to make it show up publicly. – Victor Leung Jul 23 '19 at 12:50
  • I didn't know about that! No worries, thanks for letting me know it worked. – Ben Crook Jul 23 '19 at 13:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.