Friday, February 23, 2024
 Popular · Latest · Hot · Upcoming
126
rated 0 times [  132] [ 6]  / answers: 1 / hits: 25666  / 9 Years ago, thu, april 9, 2015, 12:00:00

For some reason, my website often refuses to scroll, but only on iPhones.



Devices/browsers that do work:




  • iPad (Safari)

  • Android phones (Chrome)

  • PC (Chrome (including DevTools emulation) & IE11)



Devices that show the bug:




  • iPhone 4S

  • iPhone 5

  • iPhone 6



So clearly it is iPhone related.. It's like there's a timeout on scrolling only on iPhone. I'll try to describe the bug as good as possible.



After I load the site, I have to wait like 5 seconds before I can scroll. Then I scroll down a bit. During the scrolling, the scrollbar can be seen (as normal). When the scrollbar has faded, scrolling the opposite direction is blocked for like 5 seconds. When I scroll and scroll the opposite direction before the scrollbar fades, it scrolls as expected.



Also when I want to change scrolling direction, it's like I have to swipe twice to initialize scrolling. I have to scroll, wait, scroll to actually scroll that direction.



So:




  • Scroll down (scrolls), wait, scroll down (scrolls) - same direction scrolls

  • Scroll up (scrolls), wait, scroll up (scrolls) - same direction scrolls

  • Scroll down (scrolls), scroll up (scrolls) - changing direction before scrollbar fades

  • Scroll down (scrolls), wait, scroll up (nothing) - changing direction

  • Scroll down (scrolls), wait, scroll up (nothing), wait, scroll up (scrolls) - changing direction, have to scroll and wait twice



At wait, I wait like 3 seconds. If I don't wait long enough when scrolling the opposite direction, it just doesn't scroll.



The website uses MeteorJS and jQuery. I've tried some mobile-utility scripts, like iScroll and FastClick, but they don't seem to help.


More From » html

 Answers
119

Ok so I started commenting stuff out for hours, just to find out that the thing that was blocking the scrolling was the menu.



I have a menu, hidden in the background with the following styles:



menu {
opacity: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
overflow-y: scroll;
}


I really thought that having a z-index of -1 made it non-interactable when stuff with a higher z-index is in front of it, but apparently it doesn't on iPhone (on Android it does..).



Changing overflow-y: scroll; to hidden when the menu isn't open (and scroll when the menu is open) fixes it. Also a good idea is to just hide the menu altogether.


[#67140] Tuesday, April 7, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
maxinec

Total Points: 117
Total Questions: 116
Total Answers: 116

Location: Bangladesh
Member since Sat, Jan 23, 2021
3 Years ago
maxinec questions
;