Streaming live at 10am (PST)

Animation triggering too late at 0% on Safari iOS


When triggering scroll animations at 0% they start too late ( about 44px above?) on iPhone and Safari. I guess its because of the “action bar”. Are there any workarounds to solve this? The only way i managed to solve it is to put a “44px top padding” + “-44px top margin” on the trigger element but that hack wont work.

This is a general issue I guess and I don’t want to share a public link. Thank you.

Anyone? This have to be a common problem as it effect all scroll triggered animations. But I can’t find any answers och threads about it.

Hi, @Gushed!

Really sorry to hear about this issue. Could you, please, provide link to the project (you can send it in DM if it can’t be public) so I could try to investigate what could cause it?


Hi Anna!

I made a demo of the “bug” here for you to see. The animation works fine except in Safari on iPhone so please try it on such.



Best wishes

Any clues Anna? Very curious how to solve this.


Hi, @Gushed!

To make it more obvious to see where the action starts on the screen I changed the action on the heading from moving up/down to moving left/right.

You are right, and on iOS devices the bottom bar is messing up with the viewport marks and creating sort of offset, so 0% would be the point of the edge of that bottom bar.

It is known browser issue for a long time. I know that some people are using the script to prevent that.
Something like this:

.main_grid {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;

// Then we set the value in the --vh custom property to the root of the document'--vh', `${vh}px`);

// We listen to the resize event
window.addEventListener('resize', () => {  

// We execute the same script as before
  let vh = window.innerHeight * 0.01;'--vh', `${vh}px`);