Topic: Page transitioning/animating after load
When using mdbootstrap, my site now loads each page with some annoying transition or animation, very much like you can see on this page:
https://mdbootstrap.com/snippets/jquery/marta-szymanska/1818927
Open that page in Chrome and refresh a few times. Notice how the navigation bar sort of "slides in"... I'm assuming this has something to do with the custom font, but I'm not sure at all. UPDATE: I upgraded to the latest mdb, where the Roboto font is loaded directly from Google. So I excluded loading of the font, and the effect/bug still appears.
The pages in my site use more elements and they're ALL moving like that. I find it extremely annoying.
Worth to note: it does not always do this, but most of the time. Cleaning cache or not does not seem to make a difference. My site started doing this with the last release. Not sure what changed... Also: this effect does not appear AT ALL in my development environment. It only appeared in production.
Haven't tested this extremely thoroughly, but it seems Firefox does not have this issue.
*Expected behavior* I expect a page to simply appear, nor "slide in" or use animations or transitions.
*Actual behavior* Everything on the page is moving all over the place!
Resources (screenshots, code snippets etc.)
Very much like in this snippet:https://mdbootstrap.com/snippets/jquery/marta-szymanska/1818927
Hi,
I'm not sure. Do you mean that CSS styles are loaded later? Because when I check out my snippet above I don't see the problem in my browser.
Best, Marta
Strange. It's like the CSS styles are applied after load, and the font starts out at 1px and then transitions to it's normal size. It looks like some kind of zoom effect. I suppose it's difficult to describe - but it's persistent! If I keep refreshing your snippet, it keeps happening to the blue fixed navbar.
Hi,
In the snippet app first is loading HTML document and after second CSS styles. I think this may be the same on the page in the browser.
Best, Marta
Yes, it IS indeed that: for a fraction of a second the default styles are shown, then the mdb styles + transitions kick in and everything resizes to the right size/color/style/margins/paddings.
This happens explicitly on elements that have a "transition all". I've reverted to bootswatch and - as expected - got the same issue, but less severe. I fixed all transitions to be more specific and that solved the problem.
Not sure this is a Chrome bug or something. Not sure why it started doing this.
Hi,
I think this may be Chrome problem. Look at this: https://stackoverflow.com/questions/35880135/delayed-css-when-loading-resources-in-chrome.
Best, Marta
The problem is not specific with images, as mentioned in that stackoverflow question. The issue I was having was happening explicitly on elements that have an "transition all" CSS rule. By specifying the transition explicitly for background-color, for instance, the problem disappeared. Specifically making sure there is no transition for paddings or margins, especially when not needed, solved it.
Marta Szymanska staff pro premium commented 5 years ago
Hi,
OK, we will check our styles once again, and try to find a way to fix this if it will be possible.
Best, Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.14.1
- Device: -
- Browser: Chrome?
- OS: -
- Provided sample code: No
- Provided link: Yes