Problem with parallax with translate

[Officine Immaginazione]

Hello,

I'm having a particularly strange thing happen to me doing a parallax that just seems like a bug.

 

Basically images with class .section-image correctly have a translate(-50%,-50%).

However, in some cases, for example on small screens, it happens that this translate is changed to translate(-50%,0).

This happens on page load and sometimes on the resize.

 

And if i resize the window sometimes return working and sometimes dont.

 

Additionally, sometimes the error happens only on the second image and not on the first.

 

However, this "breaks" the animation by making the image come out too low.

 

Can you help me please?

See the Pen MWqwGKW by officineimmaginazione (@officineimmaginazione) on CodePen

[Cassie]

I would suggest not using transforms in your CSS on the same elements you're going to be animating. That's likely leading to conflicts.

Your media queries also didn't match up with the layout shift point - Is this better?

See the Pen dyqoexq??editors=0011 by cassie-codes (@cassie-codes) on CodePen

[Officine Immaginazione]

Hi Cassie,

thanks for your help.

That actually helped me to resolve the issue.

 

I remove the transform and added some flex css to center the image.

Then i reworked a little the animation translation to matche the window height and it resolved it!

 

Thenks!

[Cassie]

Perfect! Glad we got there in the end!