Here you can test the website i’m currently working on:
http://www.whateverxpress.com/wx_site/
When you navigate trough the website sections you’ll get a nasty flicker on firefox and IE, i don’t have this issue on chrome anymore, but i did have it until i changed the swf object background from opaque to transparent. So thought it could be an swf object bug, but i tried removing all the js coding and flash animations and the same prevails. So Even with the html & css alone i’m getting this issue on ff (10.0.2) – nightly 13.0a1 – IE 9 (The flicker won’t show on IE 8).
The cache is configured on the htaccess like this:
ExpiresActive On
ExpiresByType image/png "access plus 5 hour"
ExpiresByType image/jpg "access plus 5 hour"
ExpiresByType text/css "access plus 5 hour"
ExpiresByType text/html "access plus 5 hour"
ExpiresByType application/x-shockwave-flash "access plus 5 hour"
ExpiresByType application/javascript "access plus 5 hour"
FileETag none
Not sure if telling it to cache for a year will make a difference, since i tested on the 5 hours range…
I got this css code to load the background picture :
#wrapper {
width:816px;
height:921px;
margin:auto;
background:url(img/wx_base_optimized5.jpg) no-repeat;}
As you can see is a big image but i didn’t thought it would cause this nasty issue.
I’ve been reading on many sites for the past five days and i found nothing to solve this issue, so you guys are my last hope. I’ll thank you on advance for reading this much, i hope you could help me out.
P.S: Around once on 15 tries it shows correctly on nightly, not sure why.
UPDATE:
I fixed the flickering. I removed the main background jpg and to my surprise the flickering was still present, so i figured it was something else causing it. Disabling parts of my css rules i found that the “.stripped_box” which had another picture on it (around 450*450) was making my site to flicker (at least on the sections that use that rule) so i edited to use only a css background and part of the problem was solved (Even though I have no idea why).
But the main reason was the .swf object embedding code. (I tried before with out it, but since the .stripped_box was giving me a flicker too i didn’t noticed the difference). I tried embedding it using the adobe Dreamweaver swf object code and the traditional embedding system, both of them seems to work ok on chrome and IE8, but not on FFX, so i added the swfobject.js and the problem was solved. Thanks for the ajax suggestions, i was about to go on that direction but i wanted to check one last time. I hope that this question could help somebody with the same issue.
P.S:This issue is still present on IE 9, but i think is not worth to convert my site to ajax just for this version of Msie since it works ok on the IE 8.
Edit#2: Even though using the swfObject fixed the issue on firefox, i noticed i could see once in a while the flickering on chrome, not always but still there, so to fix this, i detect the users browser and serve the swf object script if they are using ff, else do nothing, and everything is perfect. I’ll have to admit that even though there is no more flickering on ff there is some sort of delay when switching pages, but that was the best i could do, i hope this helps somebody, cuz i’ve seen this issue on tons of sites that use flash animations.
Tried on my mac with FF, Chrome and Safari. Firefox laggs nearly everytime, but not always. Chrome and Safari lag rarely, but they do sometimes.
I had the problem with Firefox too with too big patterns for the background. Switching to smaller patterns solved the issue, but I don’t think that’s an option for your website if you want to keep the background. If you’re able to live without the shapes on the side you could use a smaller image and repeat it vertically. The website would also get a flexible height like that.
Second idea: Use AJAX. Don’t reload the site to display new content, just load the content and display it. It shouldn’t flash at all if you use AJAX.