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.
A reduced testcase would really help, if you can make one.
Also the URL is a 404.
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.
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
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.
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.
Could this be because the tab bar and/or bookmarks bar is visible? If both of those go away, is the result correct?
<rdar://problem/20459914>
(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.
Created attachment 252824 [details] Patch
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"?
https://trac.webkit.org/changeset/184065