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)
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
Google Fonts Not Working in Internet Explorer (Ie) 11
Min/Max Width/Height with Multiple Values
Add Padding Without Changing Overall Width
Assigining Different Font-Size Per Each Font in One Font-Family
ASP.NET MVC 5 - Stylebundle Cdnfallbackexpression Questions
Remove the Material Stepper Header
Is There a Trick to Show Arial Black in Firefox
Associating Multiple Selectors with a Pseudo-Class
Creating a Triangle in CSS with a Gradient Background
Can One Pixelate Images with an Svg Filter
Hide Overflow on Elements with Fixed Position
Using SCSS as Default Style Sheet in Angular 6+ (Styleext)
How to Style <Input Type="Text"> in IE6 CSS
Customize Bootstrap 5 Text Color Contrast in Button
CSS :After Pseudo Element Not Showing Up on <Img>
CSS Child VS Descendent Selector
What's the Trick to Inspect Popout/Dropdown Menu Style with Firebug