jQuery Slider not working properly on WebKit browsers

Question

I'm in charge of a website that is using a jQuery slider called "Accessible News Slider" and can be found @ https://github.com/rip747/Yahoo-style-news-slider-for-jQuery. The website is http://thebright.com. When viewing the site on Firefox or IE, the slider works just fine, but when viewing in any webkit browser, the images for each slider load slowly and makes it look like they're falling from the top.

I'm not sure whether this is an actual bug in webkit or if this is something that I am causing by trying to gzip the images so the website will load faster. If anyone else has experienced this problem and knows how to fix it, I'm all ears. I'd also like to know if anyone else has seen this problem, but hasn't been able to fix it.

Thank you.

Answer 1

First : Optimize all the images. As per Google Page Speed (http://thebright.com), you can reduce another 233 KB, which will make your site fast.

Second : The issue that you mentioned - When you check the network tab in Google Chrome, clearly, there is some issue with the Cache Expiry header. Some how it is not setting Expiry header properly. So, every time you go to a page, it is loading the image once again even it was loaded previously. The current value that it is showing is : Expires:access plus 1 month. Seems Apache HTTP Server is not handling this header properly.