Bug #211

Weird Display of Text on Homepage Load

Added by Matt Gold about 12 years ago. Updated about 12 years ago.

Priority name:
Category name:
Target version:
Start date:
Due date:
% Done:


Estimated time:


Ever since the BP upgrade, I've noticed that there is a moment or two, when the homepage first loads, when it looks like all of text on the "hero" slides is layered on top of one another, creating a jumbled look that resolves itself once the page loads. But I'm curious about why this is happening and whether there is anything we can do to change it. Anyone have ideas?


#1 Updated by Chris Stein about 12 years ago

I haven't really looked at what is done with the slides but I have a basic idea of what is going on. All of the slides are just separate divs and so by default visible on the page. Javascript for the slideshow then hides all but the first one and then proceeds to go through the list showing them. What you are seeing is the lag between the page loading and the javascript loading. The page will load and show all of the slides and then the javascript will kick in. It doesn't happen every time because the browser caches the javascript and it executes faster the next time.

I don't think you can do much about how fast Javascript loads and executes (although we may be able to see if we can get it to load before some other javascript) but there may be something we can do about it through the use of inline CSS and effectively starting out all but the first slide as invisible.

Don't have time to try that right now but I can later.

#2 Updated by Matt Gold about 12 years ago

Interesting, Chris. Do you have any idea why this would be happening after the upgrade but not before? Has the placement of the javascript code changed?

#3 Updated by Boone Gorges about 12 years ago

They probably need to have display: none by default. Chris, can you try that?

#4 Updated by Chris Stein about 12 years ago

Boone, I was thinking the same thing. I just went in and did it with custom.css file

I added some css that sets the display to none for all slides
and then some that sets it back to block for the slide with the class first_slide.

So from now on the first slide should have a div like
<div class="slide first_slide">

and the rest just
<div class="slide>

Something to remember when adding new slides or changing the order.

Matt, I don't know why the issue wasn't happening before except that the page may be heavier now with more content and more JS.

#5 Updated by Chris Stein about 12 years ago

  • Status changed from New to 3

#6 Updated by Matt Gold about 12 years ago

  • Status changed from 3 to Resolved

Awesome. Thanks for working on this, Chris.

Also available in: Atom PDF