Question

我遇到了我认为是Safari中的错误的问题，其他每个浏览器都能正确显示错误。

html看起来像这样：

<div id="background"></div>
<div id="midground"><div id="baggy"></div></div>

像这样的CSS：

@keyframes ex4 { /* CSS3 */
0%   { -webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px); }
100% { -webkit-transform: translate(0px, -5000px);
-moz-transform: translate(0px, -5000px);
-ms-transform: translate(0px, -5000px);
-o-transform: translate(0px, -5000px);
transform: translate(0px, -5000px); } }

@-moz-keyframes ex4 { /* CSS3 */
0%   { -webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px); }
100% { -webkit-transform: translate(0px, -5000px);
-moz-transform: translate(0px, -5000px);
-ms-transform: translate(0px, -5000px);
-o-transform: translate(0px, -5000px);
transform: translate(0px, -5000px); } }

@-webkit-keyframes ex4 { /* CSS3 */
0%   { -webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
transform: translate(0px, 0px); }
100% { -webkit-transform: translate(0px, 5000px);
-moz-transform: translate(0px, -5000px);
-ms-transform: translate(0px, -5000px);
-o-transform: translate(0px, -5000px);
transform: translate(0px, -5000px); } }
}





body { 
font: 10px/2 "Lucida Grande", Helvetica, Sans-Serif;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}

#background {
background: url("http://epicstudios.de/blackwhite/bg2.jpg") fixed repeat;  
-webkit-background-size: 100vw auto;
-moz-background-size: 100vw auto;
-o-background-size: 100vw auto;
background-size: 100vw auto;
position: absolute;
background-position:center top;
height:400vh;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 100
;z-index: 199;

animation:         ex4 150s infinite; /* CSS3 */
-moz-animation:    ex4 150s infinite; /* Firefox */
-webkit-animation: ex4 150s infinite; /* Webkit */
}

#midground {
width:240px;
height:240px;
position:absolute;
left:0px; right:0px;
top:0; bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
overflow:auto;
border-radius:500px;    
z-index:200;    
overflow:hidden;
        -webkit-transition: all 0.7s ease-out;
   -moz-transition: all 0.7s ease-out;
    -ms-transition: all 0.7s ease-out;
     -o-transition: all 0.7s ease-out;
        transition: all 0.7s ease-out;

}

#midground:hover {

width:350px;
height:350px;
position:absolute;
left:0px; right:0px;
top:0px; bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
overflow:hidden;
border-radius:0px;  
z-index:200;
}





#baggy {        background: url(http://epicstudios.de/blackwhite        /bg_neg.jpg) repeat fixed;   
background-position:center top; -webkit-background-size: 100vw auto;
-moz-background-size: 100vw auto;
-o-background-size: 100vw auto;
background-size: 100vw auto;
background-repeat: repeat-y;
height:600vh;
position:absolute;
left:0; right:0;
top:0; bottom:0;
margin:auto;

overflow:hidden;    z-index: 201;animation:         ex4 150s infinite;  /* CSS3 */
-moz-animation:    ex4 150s infinite; /* Firefox */
-webkit-animation: ex4 150s infinite; /* Webkit */
}

中心的div应该有一个圆圈，但是safari会显示一个正方形。在这个圆圈中有一个div，它比圆圈大并且因为css动画而移动。只要我将此动画应用于该div，其上方的圆圈div的overflow:hidden和/或border-radius:50%就会停止工作，并在Safari中显示为正方形。

我希望这很清楚。我不能在动画中使用JavaScript，因为我之前尝试过它，但它确实有效，但事实证明它在大多数计算机上都很难处理，并且该网站开始严重滞后和断断续续。

http://codepen.io/anon/pen/pvavVa

溢出：隐藏和border-radius无法使用css-animation

0 个答案: