â–Ľ
Streaming live at 10am (PST)

Mouse movement on viewport bug on Safari


#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: https://preview.webflow.com/preview/studio-graphix?utm_source=studio-graphix&preview=0efd8f65aa3c599144a2a85d49522c6d


#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.

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).

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