背景图像位置50％在Safari中不起作用

Question

我正在寻找一种解决方案，以便在中间获得背景图像。这在Safari中无效！？

CSS：

.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;
}

#buildingGalleryContainer 
{
width: 65%;
height: auto;
float: left;
background: #fff;
position: relative;
}

HTML：

<div id="buildingGalleryContainer">
    <div class="loader"></div>
    <img src="bilderGuide/bilder-byggnader-stora/gemini-1.jpg" alt="Bild på Gemini" id="mainImage" class="buildingGalleryContainer"/>
    </div>

Answer 1

不重复：

.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;
}

或尝试：

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

safari版本7.0.2（9537.74.9）上的屏幕

Answer 2

background-size: 100% 126% !important;
width: 100%;
height: 100%;
min-height: 550px;
background-position: bottom right !important;
background-position-x: 0 !important;
background-position-y: 0px !important;

http://122.180.31.14/staging/htm/m2/2017/oct/RNP/about.html
check on .tbs.newss classes
this will work in all browsers.