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!
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.
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)
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?
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.
Almost 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
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).