272129 - firefox doesn't load images spezified in style="background-image: url('...');" when the parent elements display-style is set to 'none' (display:none)

Status: RESOLVED WONTFIX

(Core :: Layout, defect)

Description

[Patrick]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; de-DE; rv:1.7.5) Gecko/20041122 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; de-DE; rv:1.7.5) Gecko/20041122 Firefox/1.0

Example:
If i make this layer visible via javascript
(document.getElementById("div1").style.display = "block";),
the background-image spezified in "style" is not loaded yet, but the image
spezified in "img src=" is. The missing background-image loads immediately afer
the div was made visible. This has an ugly effect on dynamic webpages.

<div id="div1" style="position:absolute:display:none;">
  <table style="background-image: url('backround.gif');">
    <tr>
      <td><img src="button.gif"></td>
    </tr>
  </table>
</div>

visibility altering through style="visibility:.." is not affected, but i have to
use style="display:..." because i don't want the invisible div to take up space..

Reproducible: Always
Steps to Reproduce:
1.
2.
3.

Actual Results:  
background-image is not loaded until the parent-element's display-style was set
to "block".

Expected Results:  
background-image should be loaded while html-parsing/page layout

Comment 1

[dolphinling]

Did you copy and paste from your site?

Look at this line: style="position:absolute:display:none;"
There's a : after absolute instead of a ;.

If something's display:none, neither it nor any of its descendants display at
all. See http://www.w3.org/TR/CSS21/visuren.html#display-prop. The only reason
the image displays at all is because that typo makes the div _not_ display:none.


Also, in my testcase the background does load. Are you sure you spelled the url
right? url('backround.gif') looks like it's missing a g...

Comment 2

[dolphinling]

Attachment: testcase

Comment 3

[Boris Zbarsky [:bzbarsky]]

Background images are loaded the first time the background style is asked for
for a node that uses that background.

In this case, that first time is the first time the display changes to something
that's not "none".

Pre-loading all images in stylesheets is not acceptable, since many sites have
huge site-wide stylesheets that set hundreds, if not thousands, of background
images, of which only a few are used on any particular page of the site.

If this is a "dynamic site", then you want to preload images as one normally
would on such sites (via Image objects).

Comment 4

[Patrick]

> Did you copy and paste from your site?
No, this was an example i wrote down from scratch. the typos aren't present in
the actual site.

But anyway, you guys make sense :)
I think i'll preload all images used in display:none'd elements.

Thanks for your time!