Mouse movement on viewport bug on Safari

Design help General
1

Hi,
I have a problem with the effect from the tutorial https://www.youtube.com/watch?v=s5_4YiUcmy4
On chrome it looks like I want it, but on safari it looks really strange, you can see it on this gif:
ezgif-1-189a544d90f6

Please help me :slight_smile:

Here is my site Read-Only: Webflow - Studio Graphix

2

Could no one help me out? :grimacing:

3

Hi @yvo010,

Sometimes it can be tricky when dealing with perspective.

I can reproduce the issue on my end but only on the published link and as you say on safari (chrome works fine). It seems to be the way the intersection of the 2 planes in perspective is interpreted.

First thing I would recommend is to remove the children perspective of your combo class “div block 4 - hero content”. As far as my understanding goes, you are creating two 3D spaces in which you transform your elements. You only need you hero section to have children perspective set and this will means to the browser that all children elements of the hero section will share a common 3D space.

40
40480Ă—1188 53.2 KB

If this by itself doesn’t solve the problem try also adding the position relative to “the div block 4” and change add a z-index of 1 for example.

This is a first lead to solve your issue.

Let me know if it does the job :slight_smile:

Max

4

Hi @Maximosaurus
thanks for your explanation!

unfortunately the problem has not yet been solved…
Can you look if i did something wrong?

Thanks again

5

Actually this should be the default behaviour of two 3d planes intersecting with each others.

But chrome interprets things differently and it seems to be the buggy one :crazy_face:

Could you try adding some transforms on your div block 4 to increase the z depth gap between these layers? (I added 500px forward and scale down to 0.5 which give me a similar visual result but is actually closer to the viewer in term of z-depth).

51
51482Ă—942 35 KB

After publishing does it make a difference?

6

@Maximosaurus
Thanks again for your reply.
The probleem is almost fixed with your tips.
But the background looks like this now:
ezgif-2-392ca76fd7d9

7

can someone help me out please. i did not fix it yet…
thanks!

8

Hi @yvo010,

Your live website seems to behave as intended on chrome, safari, firefox and opera on my end.

What issues are you still experiencing?

9

This issue:

ezgif-2-392ca76fd7d9

10

Ok sorry if it is hard to test as without publishing I can’t see if my solutions work.
We gonna figure it out :crazy_face:

Could you please try this:

  • Set the position of the hero section to relative (as your rotator is absolute you have a warning about having no ancestor set to something else than static)
  • On the rotator set width and height to 100%, remove the transform, opacity and background color properties (they are useless in this case)
  • On image 8, remove the transform property (this is dealt with in interactions) and remove the position absolute as well.

On my end I don’t see any change on your design by doing so and that might help fixing the issue on the published site. Keep me posted of what it does on your end.

Cheers

11

Hi @Maximosaurus

I hope we could figure this out haha. I realy like the effect…

unfortunately it is still not fixed after trying your tips…
If you look on the gif the image is now positioned more to the right.
Do you have other tips?

ezgif-2-5840d5b4494f

12

Yes :thinking: I can’t see this on my end still, even in safari…

We can try a different approach.

From where we left off:

  • Remove the display flex of the rotator
  • Delete the image 8 element completely
  • Add a background image to the rotator and set it to cover, no-repeat and position center
  • Set the width and height of the rotator to something like 120% (it will ensure you have extra material to show on the edge during the rotation)

Hopefully that will do the trick

13

Did this ever get solved? I have the same issue now.

https://discourse.webflow.com/t/mouse-movement-on-viewport-bug-on-safari-on-mohave-14-2-1/78085

14

Hey @yvo010 and @colourfulchris, not sure if you’ve ever solved this, but I just had the same issue and figured out the solution after some digging.
It basically has to do because of the fact that two panes/divs are on exactly the same height, so the start overlapping at some moment.
To solve this, just take one of the elements (I took the one in the background) and move the z-axis back a little bit (make sure you have child perspective set on it’s parent object). Also add a bit of scaling, to get it back to it’s original size:

webflow

Hope this helps, good luck!

15

Due to the issue, I went away from this, but I want to try it now. Once done. I report back.
Thanks!

16

Hello! I have a similar issue, but not sure if it’s a bug.

I have a header with 3 layers under it. When I move the mouse in viewport, I want the layers to follow the mouse movement along the x and the y axis. It seems to do this correctly, although - the animation is super jumpy. It looks like it can’t have an x and y value at the same time, instead it jumps between the x value and the y value.

I want it to be similar to the rotation animation here, but with movement instead of rotation: Website interactions and animations | Webflow

Link: https://preview.webflow.com/preview/lpr-936eb2?utm_medium=preview_link&utm_source=designer&utm_content=lpr-936eb2&preview=a9f7d96f5727d9a5a648322e020adf47&mode=preview

Thanks!!