3

I am noticing in Safari, fixed cover backgrounds don't justify properly. Using background-position: left bottom; , the background image should be justified to the bottom left corner of it's container, so for example image given the logo should always be present since it's in said corner.

See the example below, in Firefox the logo on the bottom left of image appears, and on Safari (Version 8.0.3) it doesn't.

background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: left bottom;

http://jsfiddle.net/louiswalch/b6hszasz/1/

Behavior: Firefox Left / Safari Right

enter image description here

Louis W
  • 3,166
  • 6
  • 46
  • 76
  • Since you're using a fixed background attachment, the bottom logo will of course not be visible all times, but in a certain scroll position range. I don't see how your example fails to work in Safari. Also, what do you mean by "don't justify properly"? You have to be explicit about your issue (and the desired behaviour)—we do not know what you consider as proper or not. – Terry Aug 21 '15 at 19:16
  • I added some more detail for you. Yes it's fixed, however background-position: left bottom; should control where it's fixed to, and in the example given should always show the bottom left corner of the image. – Louis W Aug 21 '15 at 19:32
  • I still have no issues seeing the logo. Using Safari 9. – Terry Aug 21 '15 at 19:54
  • I have confirmed this is happening across multiple installations of Safari, and on my local computer I can replicate it with Safari 8. Cannot see logo: https://www.evernote.com/l/AAiugGGmm2lGWK-XyasJ1-NpJLSCxC1Fjcw – Louis W Aug 21 '15 at 22:23
  • I checked in Safari 8 and I'm not seeing the issue either. It almost sounds like you want the background image fixed but the foreground logo positioned absolutely in the bottom left. If that's the case, could you separate the two and position/attach them separately? – Benjamin Solum Aug 25 '15 at 19:15
  • Here are a couple of similar SO questions that may be of help: http://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios http://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7 http://stackoverflow.com/questions/19045364/fixed-body-background-scrolls-with-the-page-on-ios7 – crazymatt Aug 25 '15 at 23:22

1 Answers1

1

From your screenshot the problem seems to be a iframe scrolling problem. I can reproduce your issue not only on Safari, but on Firefox and Chrome as well.

In the embedded view of jsfiddle, the "result" iframe is in a div with padding-top. But the iframe height is calculated without the padding, so it becomes possible to scroll in the frame. Your fixed background stays at the bottom of its own window, but this window scrolls, so at some points it gets lower that bottom of the browser. You can test it by opening your link:

http://jsfiddle.net/louiswalch/b6hszasz/1/embedded/result/

Then opening the console and run this line:

document.getElementById('result').style.padding = '0px'

You should see your background behaving normally. Since iframes in jsfiddle are sandboxed, not sure there's a way from your iframe to correct this.

Note that this is based on your screenshot, your fiddle and on the behaviors on my browsers, there may be another issue as well. But on my end I can reproduce this problem fairly easily.

EDIT:

Looking at your live site, it's pretty clear there's another issue, which clearly looks like a bug. What seems to happen is that Safari considers the viewport as being the outerHeight of the window instead of innerHeight. I'm guessing it's because of the transparency effect in the toolbar/header. In any case, you can see this clearly running a few commands in console. This one doesn't move the image at all, which suggest that the 100% position y is made according to outerHeight instead of innerHeight:

$('.image').css("background-position", "left -" + ($('.image').width() - window.outerHeight) + "px")

But when using this one moves it properly:

$('.image').css("background-position", "left -" + ($('.image').width() - window.innerHeight) + "px")

So I guess one solution would be to detect Safari and define dynamically background position this way. But then you would have to redefine on resize as well.

Julien Grégoire
  • 16,864
  • 4
  • 32
  • 57
  • This is not related to an iframe, it's happening also on my real site (http://ericdoak.pairserver.com/why-renew) where there is no iframe. Constantly I can reproduce in Safari only, the background image does not get fixed to bottom left and the logo gets cut off. – Louis W Aug 25 '15 at 12:46