Shift in Header upon Page Load
It looks like you took care of the white background that was showing up on the loading of the header. Thanks very much! I still do see a shift upon loading (from left to right) of the header as a whole. If you can try to figure that out, I'd appreciate it. Please let me know whether you'd like a screencast.
#2 Updated by Boone Gorges over 10 years ago
Sorry to butt in here, but I took a quick look and I think this has to do with the scroll bar. It's only when the scroll bar appears (which is when enough of the page has been loaded to require a scrollbar) that the header shifts. The only real solution I know for this (on a centered layout, which can't be anchored to the left side of the screen) is to put an invisible div in the background that has a height of 101%, which forces the scrollbar to always be present. But Michael, you probably know better than I do.
#3 Updated by Zach Davis over 10 years ago
I would argue that this isn't really a bug at all, but rather a matter of how browsers work. We shouldn't try to manipulate the presence of the scroll bar. If we really want to address this (and I think we have much bigger fish to fry), then we should focus on optimizing CSS and markup so that the page loads faster.
#5 Updated by Matt Gold over 10 years ago
- Status changed from Assigned to Reporter Feedback
- Priority name changed from High to Low
I disagree with Zach, but now is not the time to discuss -- as Zach says, we have bigger fish to fry.
So let's keep this ticket open on a lower priority and get to it later. Thanks for getting rid of the big issue -- the white background on header load.
#6 Updated by Zach Davis over 10 years ago
Ok - interested in hearing your reasons, Matt. I'm a pretty strong believer in the principle that a website should not do things that interfere with the basic functioning of the browser. Websites shouldn't break back and forward button functionality, for example, and they shouldn't manipulate scroll bars (except, perhaps, to turn them off entirely for the occasional pop-up, but then who uses popups anymore anyhow?). If we want to change how the page is rendered, the correct way to do it is to address it at the level of the DOM and the order in which styles are declared / applied, not by relying on a hack. What I was trying to say was that the problem you're identifying is not something that needs to be addressed in and of itself; it's the (correct) side effect of another problem, which is messy inheritance in the CSS and less-than-ideal markup.
I wonder if it would make a difference to simply combine the CSS into a single file (as a short-term solution). It might be worth packing / minifying the CSS so that the browser can parse and process it in a single pass instead of waiting for multiple stylesheets to load.