Scroll doesn't work until I change orientation of iPhone to landscape and then back again

#1

Hi All!

I’m working on the tribute page project. Everything works the way I want in desktop Chrome and Safari, and in the Chrome inspector mobile view.

However…the page won’t scroll in portrait mode on my iPhone 8 (iOS11 Chrome browser and Safari browsers, latest versions). Only once I turn the phone to landscape and then back again, can I scroll in portrait mode.

I searched tons of articles for a solution. The closest article was on this google group. But the defective scroll mentioned in that article was an iScroll, whereas my pen just uses the default scroll.

The scroll works again as soon as I comment out the video tag in the html. I tried all kinds of combinations of overflow and width/height in lots of different places and with lots of different properties.

Forgive me if this is a stupid error – it’s only my second week coding :wink:

Thanks in advance for any ideas!

Jan

#2

Maybe you can use media queries to hide the video (or change it to just a link) in mobile view.
This is probably a bit advanced for you but make a note to come back and fix it later when you understand more about CSS.
Good job although I have a strange effect where it turns to a white background on wider views. :confused:
or maybe that is because the image didn’t load immediately.

1 Like
#3

hello,
before you try to fix something complicated or vague, make sure you fix all noticeble ones first.
order of scripts is important. not sure if tis gonna solve your problem but either way you need to do it properly

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
1 Like
#4

That’s a good point, pseudop. Thank you! I changed the order, which didn’t fix the problem. But it’s good to know about this principle of ordering them.
Then I realized, that I can just delete the jquery script completely because my site has no js. … So the code is cleaner now thanks to your advice :smile:

1 Like
#5

Thank you @JohnnyBizzel! After considering your suggestion and some experimenting, I realized the problem with more detail…I just needed to replace position: fixed with position: absolute and now it scrolls in portrait mode on mobile…but then the bottom of the background is just white in desktop mode.

Anyway…good idea to work on a different project first. Thanks again!

1 Like
#6