iPads/iPhones: problem with my Homepage
Hello everyone, first time poster here!
So I'm a potter who has some html/css/js experience and I decided to challenge myself and redo my website from scratch, often following Kevin's tutorials for support.
Anyway, it's online and working pretty good except that my homepage has content that can't be scrolled on iPads and iPhones. There is content under an image slider that serves as my hero section, as well as the footer. I don't have either of those Apple devices, but I was able to confirm the problem with several friends who do. I thought it might be Safari, but the problem exists in other browsers as well! However it's not a problem on Android tablets or phones as far as I can tell, my homepage behaves as expected. On the iPads and iPhones the other pages of my site work as intended: the content is scrollable all the way to the footer.
I have no idea what could be causing this since it works on many other devices including iMacs and other Mac laptops. The address is https://www.patrickduclos.ca/en/index.html Any clues or insights you may have would be greatly appreciated as I am at a loss here. I checked using the devtools on my Win PC or Apple products emulator websites, but they all show my homepage as working fine.
Anyway, it's online and working pretty good except that my homepage has content that can't be scrolled on iPads and iPhones. There is content under an image slider that serves as my hero section, as well as the footer. I don't have either of those Apple devices, but I was able to confirm the problem with several friends who do. I thought it might be Safari, but the problem exists in other browsers as well! However it's not a problem on Android tablets or phones as far as I can tell, my homepage behaves as expected. On the iPads and iPhones the other pages of my site work as intended: the content is scrollable all the way to the footer.
I have no idea what could be causing this since it works on many other devices including iMacs and other Mac laptops. The address is https://www.patrickduclos.ca/en/index.html Any clues or insights you may have would be greatly appreciated as I am at a loss here. I checked using the devtools on my Win PC or Apple products emulator websites, but they all show my homepage as working fine.
Au tour de la terre
utilitarian pottery
14 Replies
Worse comes to worst you can pay for a month of browser stack which will let you emulate it correctly. Unfortunately I'm not able to help much as I don't have an Iphone
I was able to scroll on my iPhone, but I did have to long press when starting at the hero. I think the issue is that on your hero you have a horizontal scroll. If I swipe right and then left I scroll through the carousel just fine but there’s something about the school behaviour of that section that I had to long press to be able to scroll down to the rest of the page. Once I was past that part of the page, it worked fine. Other pages worked fine. I think it has to do with that hero scroll. I have no ideas how to fix it but hopefully that gives you some insight. Screen recording was in discords browser window but tried in chrome and safari and got the same results.
Also on iPhone it seems fine. However going one way and then the other makes it jump, are you using an animation rather than a transition? Also auto scrolling doesn’t get reset when I scroll so it’s possible to swipe and then for it to move onto the next one immediately
Also, all browsers on iOS are safari, whether the Chrome or Firefox app
Also, all browsers on iOS are safari, whether the Chrome or Firefox appThat makes a lot of sense
Ha! That's interesting! Thanks for the detailed feedback! 👍
The hero slider animation is controlled via a script which automatically moves each slide to the left after 10 seconds (minus 1 sec for the actual animation). The script checks if the screen has been touched and that might be where the problem lies. I use the following to evaluate that part: ( 'ontouchstart' in window ) ( navigator.maxTouchPoints > 0 ) ( navigator.msMaxTouchPoints > 0 ). From there I check the difference in X and Y (event.touches[0].clientX and event.touches[0].clientY) to see if there has been a left or right swipe and then call event.preventDefault() before exiting.
I also set a height of 93vh and 93svh on my hero section and I think that causes a problem in seeing the "dots" underneath the slider (I don't know if that has anything to do with the problem though). I also haven't put any "webkit-" prefixes anywhere in my css although my css doesn't use anything that has not been supported by webkit for at least several years. Yes I animate the left property of each slide every 10 seconds. I noticed some strange things going on (like slides moving rapidly one after another every once in a while), but don't have enough js experience to make the experience smoother. It's a work in progress! 🙂
I also set a height of 93vh and 93svh on my hero section and I think that causes a problem in seeing the "dots" underneath the slider (I don't know if that has anything to do with the problem though). I also haven't put any "webkit-" prefixes anywhere in my css although my css doesn't use anything that has not been supported by webkit for at least several years. Yes I animate the left property of each slide every 10 seconds. I noticed some strange things going on (like slides moving rapidly one after another every once in a while), but don't have enough js experience to make the experience smoother. It's a work in progress! 🙂
how r u checking the distance
at touchstaer and touchend?
I use touchstart and touchmove.
I forgot to have a look at what you’re doing when I was on my computer but if you’re using
animation, which looks like you are, instead use transition (copy over the duration and timing function from animation) and it’s probably best to have whether you’re using left or transform: translateX use calc(var(—slide) * 100%) then when swiping or automatically switching you update —slide
Additionally use let heroInterval = setInterval(…) and when a mouse/touch event starts call cancelInterval(heroInterval) and when it ends call heroInterval = setInterval again (it’s probably good to just initialise let heroInterval; and then have a function to start it, additionally check to make sure it is undefined and after cancelling make it undefined)k got it
Thank you for the suggestions! I will let that sink in a bit since I'm quite the beginner in JS! 🙂
Well good work as a beginner
Ah, thanks! LOL! I saw that there are librairies that take care of all the heavy lifting, but I thought "Nah, I don't want to go there with my little ol' site"! Makes for a good learning experience though! The only problem here is that I don't have an iPad to test with, but at least this quirky behaviour is not really a deal breaker, the site works for the most part and " I'm " the customer so...lol!
Absolutely, it’s always worth trying to do it yourself even if you know you’ll end up using a library; good attitude to have
Ok, so if anyone sees this, I think I've solved the problem with my homepage hero horizontal image carousel scroller not allowing vertical scroll action on iPads and iPhones and Firefox on Android: I have 2 event listeners in my image slider script, one for touchstart and the other for touchmove events and the 3rd parameter was set simply to "false". It should have been set to {passive: true}. That seems to have done the trick! Safari defaults that parameter to false while the others default to true...so, yeah, a bit of a headbanger that was! 👍