Css3 Background-Position Issue with Safari Only

CSS: background-position + padding not working in Safari

See this previous question, it will probably answer your question - CSS3 background-position issue with Safari only For future reference, make a jsfiddle demonstrating the problem, so we can try to fix it ourselves before just giving you educated guesses.

CSS: Safari Mobile doesn't support background-position offset

Mobile Safari (as well as the Android browser) doesn't support the four-value syntax yet. (see the MDN article on background-position).

One possible workaround would be to extract the background image which should have the offset and put it in a pseudo element that has the corresponding offsets.

#my_div:before{
content: '';
display: block;
position: absolute;
z-index: -1;

height: 50px; /* Height of your image / parent div */
width: 50px; /* Width of your image / parent div */

/* Your offset */
top: 17px;
right: 15px;

background-image: url("...");
background-position: right top;
}

For easier understanding I created a jsFiddle: http://jsfiddle.net/pKWvp/1/

Background image position 50% not working in Safari

it is no-repeat :

.loader {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, .8) url('bilderGuide/bilderLayout/ajax-loader.gif') no-repeat 50%;
z-index: 10;
display: none;
}

or try:

background-color: rgba(255, 255, 255, .8);
background-image: url('bilderGuide/bilderLayout/ajax-loader.gif') ;
background-repeat:no-repeat;
background-position: 50% 50%;

SCREEN on safari Version 7.0.2 (9537.74.9)

Sample Image

Fixed background images in Safari - Not aligning to bottom of viewport

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.



Related Topics



Leave a reply



Submit