Bug on mobile, Chrome and Safari desktop browsers

Hi there,

For some reason the arrows on the button in the hero section are getting cut off during the hover animation. This only occurs on safari and chrome browsers. Firefox has been fine so far. It’s odd because I have made this button into a symbol and everywhere else on the site it works properly.

The arrows are also getting cut off on the pre-loader on mobile, Chrome and Safari desktop.

I would be very grateful if someone could help me with this, thanks!

Here is my site Read-Only: https://preview.webflow.com/preview/crossfitmatter-landing-page?utm_source=crossfitmatter-landing-page&preview=7b24df444dc81689c71376769606845c

Here is the actual link: https://crossfitmatter-landing-page.webflow.io/


The real question is “why doesn’t it happen on desktop too”, because what happens is expected, logically.

You have set a 3D transform on an element that sits on a plane (its parent element). So what you witness on mobile is the browsers interpreting it as a 3D transform, so when you rotate the element on the X axis, in a 3D space, the part that is going away from you also goes through the parent plane and hides behind.

In order to fix this, you can try to forst make the object move towards you (positive value on z axis) so that it freely rotates on X without having any part crossing the plane on which the parent sits. As you haven’t defined any perspective, you won’t see any effect. Try to find the minimum value that fixes your bug.

http://vincent.polenordstudio.fr/snap/19d2vvz.jpg

1 Like

Hi @vincent ,

Thanks for your response. This does happen on desktop so not sure what you mean by that.

It’s only happening for one of the buttons which I still don’t understand.

If I create a value for the z axis the animation will change…no? I want to keep the same animation.

If what you say about “going through the parent plane” is the case than why does it not happen to the other buttons and only the button in the hero?

CSS 3D transforms is a complicated thing that depends a lot on contexts, parents etc. It regularly behaves defferently depending on browsers and browsers versions.

No, you’re only affecting the x axis, so giving it a z transform will just place it differently on this axis.

Not happening for me on Chrome mac up to date. Happens on Safari (button and loading anim)

@vincent thanks so much. Worked like a charm!

There’s one more bug I need help with. Seems that the navbar has a bit of an issue on scroll, Safari browser. Does it have anything to do with my double navbar?

Here is the read-only link again: https://preview.webflow.com/preview/crossfitmatter-landing-page?utm_source=crossfitmatter-landing-page&preview=7b24df444dc81689c71376769606845c&mode=preview

1 Like

I see it’s a bit jumping yes.

To begin with, the reveal on scroll isnt really a UX to look for here. You should maybe consider a simple trigger than will start a reveal animation, one that isn’t completely depending on the scroll. It will be a better UX as the navbar, very important item, won’t risk to be stuck half revealed when users scroll.

And it may fix your issue too…

1 Like

@vincent Ok, makes sense. So, I’ve now set the trigger to “while scrolling into view” which is set on the 2nd About_Section_Div

Is that considered a more simple trigger?

Navbar is still jumpy on Safai :confused:

Almost :slight_smile: What I meant is NOT to use a progressive, bound on scroll, transisiton. Rather use one element as a trigger, and when it exits screen, it starts an animation on the menubar. But a keyframed animation, not one that’s tied to the scroll. The right duration for such a reveal animation imho is 350ms ease out (and 250ms ease in for when it goes back up).

To trigger this, you can use an existing element, or create a dummy 0px div that you place where you want

For Safari jumpiness, I don’t have an answer… sometimes it does that when a page is too heavy. i quickly looked at your images and there are no abuses and you did compressed them well.

To find a possible culprit: make a copy of the page, delete every section one by one. Publish after each deletion and check how it improves the rendering in safari. If there’s no obvious culprit, if the responsiveness gets better the less content there is, then… try without any IX… come back to report I guess :slight_smile:

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.