Animation triggering too late at 0% on Safari iOS

Design help Animations & Interactions
1

Hi!

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.

2

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.

3

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?

Respectfully,
Anna

4

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.

Demo: https://demo-animation-trigger.webflow.io/

Read-only: Webflow - Demo animation trigger

Best wishes
Gustav

5

Any clues Anna? Very curious how to solve this.

Best
Gustav

6

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:

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

<script>
// 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
document.documentElement.style.setProperty('--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;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

</script>