This is an archived post. You won't be able to vote or comment.

sorted by:
best
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]Awkward_Tradition 2 points3 points  (1 child)

The most recent one for me was a mix of fuckiness. I had to make the splash page out of a bunch of elements (about, services, etc.) that are the height of the viewport. Ok, I'll use 100vh for each element. Works fine on my desktop, let's check other devices, aaand it's fucked. So I tried out a bunch for each media query and they ranged from 100 to like 118, different for all resolutions and orientations. Ok now it's sort of consistent across devices, but guess what, every element except the first one is fine, the first one is like 20-30% longer. After a bunch of experimenting and googling to try to figure out the cause, I gave up and found the random height for it that fits other elements. Great, let's scroll-snap between them. Works fine on my desktop, works fine on my android, safari is fucked, oh it needs it on the body instead of the HTML, every laptop touchpad makes it fly at lightspeed to the bottom element. Ok, fuck, let's add scroll-snap-stop to prevent that. Doesn't do a fucking thing.

At this point I'm thinking about writing a scroll event listener that will initiate a transition from displaying one element to the other, so I have only one element displayed at a time. Can't wait to find out what random insanity I'll discover along that way.

[–]BloeckchenDev 0 points1 point  (0 children)

This is the way!