Navbar jumps around when published

I’m encountering 2 bugs with the navbar:

It doesn’t happen in Chrome, but it does in Safari.
For example this page:
http://www.reisdoormongolie.nl/

When viewed in Chrome, no problem. When viewed in Safari… Whenever i click, all navlinks do some crazy transformation?

Similar to this problem in another site: whenever I click all navlinks move to the top (outside of the window) and immediately come back.

Any one else having this problem? It’s strange!

That’s very strange behavior! @danro will look into this to see why it’s jumping like that. Thanks for pointing this out!

@rowan This type of behavior is the result of using Transition: All for your effects. What happens is, the browser mistakenly tries to transition all the properties of your element.

To avoid this, selectively set your transitions to the properties you need.

For example, in your nav links you would select Transition: Background Color and Transition: Color since those are the properties you’d like to animate.

-Dan

That site looks great. Just wondering how you go the color background for the section to be that size. When I create the menu bar, the link blocks are much bigger and not uniform around the text.

Also, the all properties is applied instantly when you click the timer, which causes the problem regardless of if you change the parameter afterward. The only way to get rid of it is to revert.

This could make sense… I will try this later today!

@danro Thanks mate. Was having this problem and just couldn’t figure it out. I think it’s important that this topic be made pinned or something. Better yet would be including this problem in some kind of frequently faced problems. (by default I would always apply the transition to all properties; so now I wont :smiley:)