views:

58

answers:

2

Hello,

Currently I have a site where a bar (with various links) is prepended to the body (actually appended to the source, but it is rendered on top of the page, so prepended to the result) using javascript. This Javascript is dynamically loaded trough an init script (which loads jquery, etc). Once jquery has been loaded the script is run to append the topbar.

In most browsers (Firefox, Internet Explorer, Safari) it just renders with the bar immediately, but Google Chrome (probably because its tries to render early on, making it faster on most pages) first renders the page, then renders the bar, and causing the page to jump ~40px everytime it is rendered.

I find this whole jumping rather ugly and annoying, so does anybody have an idea on solving this?

A: 

Why not reserve space for bar using CSS?

Kuroki Kaze
I already dynamically load css in the javascript. Adding javacript to the page itself is not an option, because the bar must work with a lot of pages, and a single script line should be enough.
ChaosR
You can leave padding before body, and remove it with js-loaded css (bar will be there by the time, i think).
Kuroki Kaze
A: 

It seems the solution was simpler than I thought, I just have to put the <script> at the top of <head>, before all the other scripts and styles.

ChaosR