Bug 103757 – background-position sometimes doesn't work properly with background-attachment: fixed

• Component: CSS
• Status: RESOLVED FIXED

[Michał Gołębiowski-Owczarek]

1) Look at http://wystawy.bn.org.pl/norblin/fullscreen/#object_type=catalogue#object_id=2 in Firefox and look at styles applied to the only element with a class "sd_visible_rect". You'll see sth like:
background-attachment: fixed
background-position: 1460px 682px;
Background position is set relatively to the top-left window corner.

2) The same site breaks on Safari & Chrome on OS X (on Windows in Chrome it sometimes work and sometimes not, it's hard to say what's the reason). Actually the above site renders correctly but only because I'm applying a special background-position specifically for Webkit browsers, relative to the parent, not the window corner:
background-position: 5px 5px;

I wanted to reproduce it on a less complicated example but when I just download the site and open a static HTML file, it seems to render correctly. The issue probably exists only when set by JavaScript and only in certain conditions. Unfortunately, this behaviour seems to change periodically so this one rectangle has a broken background in WebKit browsers a lot.

[Simon Fraser (smfr)]

A reduced testcase would really help, if you can make one.

[Simon Fraser (smfr)]

Also the URL is a 404.

[Michał Gołębiowski-Owczarek]

As for 404: sorry, I forgot there is an internalisation-related bug at the site currently if you enter from a browser with unsupported language. Please, go to:
http://wystawy.bn.org.pl/norblin/
and click on PL in the bottom-right corner; then try the provided URL.

As for the reduced example: I'll try though it's not easy, unfortunately. If you could just do what I described and see the bug, maybe it'll ring some implementation-related bell... If not, I'll try my best to reduce the test case.

[Michał Gołębiowski-Owczarek]

Sorry again, that URL was, indeed, not accessible from outside. You might try going to:
http://wystawy.bn.org.pl/ptolemeusz/
click on PL in the bottom-right corner and then go to:
http://wystawy.bn.org.pl/ptolemeusz/fullscreen/#object_type=tour#object_id=357

[John Lascurettes]

I came to report the same or similar bug with WebKit on Safari (as seen on Yosemite 10.10.2 and Safari  8.0.4 (10600.4.10.7)). Here is a link to a test case that demonstrates where the combo of background-position and background-attachment: fixed does not work as experienced in any other browser that supports those CSS properties. 

http://emological.com/box/bgtest/

In the test, the grass of the HTML background (html.png) should be positioned 0, 100%, or flush with the bottom of the browser's viewport, but actually is pushed mostly off the bottom edge of the viewport. 

Interesting notes: 
- Setting no explicit height, or a height:100% on the HTML element displays the same bug
- Setting height: 100vh; results in the desired behavior that other browsers display.

[John Lascurettes]

Sorry, I spoke too soon about the vh CSS unit. That does not work as a workaround. I had toggled off background-attachment:scroll when testing that. height:100vh results in the same issues.

[Jon Lee]

Could this be because the tab bar and/or bookmarks bar is visible? If both of those go away, is the result correct?

[Radar WebKit Bug Importer]

<rdar://problem/20459914>

[John Lascurettes]

(In reply to comment #7)
> Could this be because the tab bar and/or bookmarks bar is visible? If both
> of those go away, is the result correct?

Removing tab bar and bookmarks helps but still does not show correct positioning of background elements. Removing status bar has no effect.

[Simon Fraser (smfr)]

Created attachment 252824 [details]
Patch

[Darin Adler]

Comment on attachment 252824 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=252824&action=review

> LayoutTests/ChangeLog:10
> +        actually wrong, so get fixed to use a gradient (so you can see where the edges of the image are),

"so get fixed"?

[Simon Fraser (smfr)]

https://trac.webkit.org/changeset/184065