polilang - behind the scenes.

Quick summary with not-that-well-hidden advert of the site:

http://polilang.co.uk offers:

- Online Polish Language Courses via Skype
- Professional Language Training
- Small Groups
- One-to-One Lessons
- All Levels
- Polish For Children
- Polish For Business
- Certificates

Sunday, 31 January 2010

Content flickering issue CSS-related

It's been a while :)

Today something a bit different than previous entry. Recently I've noticed than very often when I loaded a page most of its content in the middle (e.g. rectangles with text on "About Us" page - http://polilang.co.uk/about) rendered for a while with greyish background (I'm writing greyish coz it's probably some shade of grey that only women would know how to call :) - sth along turkey blue or fishy red :P).
Then - when content (e.g. mentioned rectangles) was loaded - the background was changed to yellowish.

It started to annoy me (and "business representative" :)) so I've started to investigate the issue.
At first I've thought it might be JavaScript. E.g. some elements are not loaded quick enough because some JS code is taking too long to execute and so the elements are not showing with correct background.
The only code that could take long enough to disturb content loading was Google Analytics script. This forum entry reinforced my suspicions:
http://expressionengine.com/forums/viewthread/130413/#643731

So I've removed Analytics code for a while to check whether issue will be gone.

Nope, it was still there.

The next step was disabling ALL JS code in Firefox and tried reloading page couple of times.

And again - issue was still there.

So I've focused on CSS. What I've found?
As mentioned before <body> element had color attribute set to greyish. Then there were few other elements responsible for rendering shadows and frames around all the page content. And they had background color set to transparent and maybe some background images.
The first element that had yellowish color is placed in hierarchy just below elements with transparent background. So until this element was fully loaded (meaning all its content was loaded) the greyish color was going through all transparent elements and was visible.
Fortunately there was an element in hierarchy just before transparent ones.
Simply changing its color to yellowish fixed the issue.

Now it seems so simple and logical, eh? I hope it will help you when you stumble upon similar issues.