Bug 39943 - Fixed background image only renders when scrolling page
Summary: Fixed background image only renders when scrolling page
Status: RESOLVED LATER
Alias: None
Product: WebKit
Classification: Unclassified
Component: Images (show other bugs)
Version: 525.x (Safari 3.2)
Hardware: PC Windows XP
: P2 Normal
Assignee: Nobody
URL: http://www.jakobkramer.dk/privat/main...
Keywords:
Depends on:
Blocks:
 
Reported: 2010-05-31 01:33 PDT by Jakob Kramer
Modified: 2010-06-03 05:18 PDT (History)
0 users

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Jakob Kramer 2010-05-31 01:33:28 PDT
Hi,
I have encountered a problem that appears in both Google Chrome (v. 5.0.375.55) and Safari (v. 4.0.5) for Windows. I have been told, that both these browsers use WebKit to render the pages, and this is why I file the bug here. If this is not the correct place to file the bug, please let me know!

The bug is as follows:
My homepage used to use 3 frames. Two of these had fixed background images. I have now recoded the homepage, so it doesn't use frames, and the two background images are fixed using CSS (one to the left, one at the bottom of the screen).

In all other browsers I have tested (IE 8, FF 3, Opera 10) both background images render without problems. In Chrome and Safari, however, only the left background image renders. The bottom background image does not render UNTIL the page is scrolled. Then everything works fine. I have tried adding a small piece of javascript that scrolls the page one pixel down and then one pixel up when loading, and then the background renders OK. This is only possible in pages that are long enough to allow scrolling, though (and it doesn't look nice that the page jitters upon loading).

In short: It seems that Chrome and Safari doesn't render all background images, until the page behind the background is scrolled, thus somehow forcing an "update rendering" of the background images.

I have created a test page here: http://www.jakobkramer.dk/privat/maingb_test.php
Please note that I have made a workaround on all other pages of my homepage (by assigning a special stylesheet to Chrome and Safari, in which the problem background image is not rendered at all). Therefore the bug can only be viewed using the link above.
Comment 1 Jakob Kramer 2010-06-03 05:18:35 PDT
OK, I have been working with the CSS for the page and I seem to have stumbled upon a way to fix the problem:

In the CSS for the DIV for the bottom menu (the one with the background image problem) I hade four lines regarding the background image. They were:

background:url('privat/backgr/menu2.jpg');
background-position: 182px bottom;
background-repeat: no-repeat;
background-attachment: fixed;

Once I removed the last of the lines (that is, once I removed "background-attachment: fixed;") the background image appeared without problems, only shifted slightly to the right which I has able to fix using the background-position parameter.

As the CSS is now updated, the problem will no longer appear if you follow the link.

I'll mark the bug as resolved, although technically it isn't.