Images and Background Images Disappearing and re-appearing in ie8 [#2169603]

Okay, I have dealt with this sort of issue before, and it always had something to do with either too many CSS files or responsive CSS causing images to look strange in ie8 or not even show up at all.

This time is different. When I load the site in ie8 sometimes all the images load (sometimes 75% of them load). Then I'll simply refresh the page, then suddenly a handful of images and background images will just disappear. I'll refresh again and some images will show up again, while others that were showing up before are now gone!!??

I would be pulling my hair out if I didn't just shave my head, I am going crazy over here. I have tested the site on an old laptop, and a browser testing website called Cross Browser Testing... both display the same bug.

Sorry to post the priority as "Critical" but the site needs to go live soon... and I am all out of answers—completely hit a dead end.

Please, any help will be greatly appreciated.

Here is the site: http://besalighting.server322.com/

Comments

Comment #1

steven_kropp CreditAttribution: steven_kropp commented 8 January 2014 at 17:47

Category:

Bug report

» Support request

Comment #2

steven_kropp CreditAttribution: steven_kropp commented 8 January 2014 at 18:07

Side note: Just ran test for ie9 and ie10 and seems to load perfectly. No issues there.

Comment #3

steven_kropp CreditAttribution: steven_kropp commented 13 January 2014 at 16:43

Does anyone have any ideas? This is continuing to be a problem, and I still cannot find a clear cut reason why.

Comment #4

joelhsmith CreditAttribution: joelhsmith commented 21 January 2014 at 15:17

I have a few questions and suggestions to help you debug the issue:

OPTION #1:

Are you only experiencing the issue in IE8 and lower? If so, this is probably the reason:
IE only loads the first 31 stylesheets. http://john.albin.net/css/ie-stylesheets-not-loading

Drupal can automatically aggregate all those sheets into a few with a click of a button. It chunks them into tasty morsels (less that 31 sheets for sure) and they will be around 20k-40k or less each which is the optimum bang for your buck per http request, IMO.

Again, if this is just an IE8 problem then what I think is happening is that your background images are in a stylesheet past the 31 sheets allowed.

Its super easy to test this theory. Go to Configuration > Performance > click the check box. Clear your cache. But you probably already tried that.

OPTION #2:

So, if it is STILL busted, try this:

Take each and every one of your stylesheet and run it though the W3C validator:
http://jigsaw.w3.org/css-validator/

It is possible you have a line of invalid CSS in one of your stylesheets. Un-aggregated CSS is sorta parsed more leniently than aggregated CSS. You might have a line of code in there that is causing a fuss.

Hope this helps! Let us know how it goes :-)

Comment #5

steven_kropp CreditAttribution: steven_kropp commented 21 March 2014 at 21:09

I thinking it was a problem with a slideshow on the homepage. The jQuery of that slideshow in particular. It seems that once the slideshow loaded, it would not allow any other images to load.

So I changed the traditional drupal jquery closure from:

jQuery(document).ready(function($)...
——to——
jQuery(window).load(function($)

It doesn't load as smooth as it used to, but at least the whole page loads now.

If anybody has any better ideas, I would to know them. The slideshow I was using was Maximage...

http://www.aaronvanderzwan.com/maximage/

Comment #6

echoz CreditAttribution: echoz commented 23 March 2014 at 02:28

Priority:

Critical

» Normal

"Support requests should never be marked 'critical' or 'major'"
From Priority levels of issues

You might test if this is caused by the slideshow, by removing it and seeing if that resolves it.
You'll probably get more eyes on this by posting to the Post Installation forum, especially if it's not Zen specific.