サファリ11 - CSSアニメーションにおけるホワイトスペース

Question

ブラウザのサイズを変更すると、Safariの11の空白

.river { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.river-frame { 
 
    width: 100%; 
 
    position: relative; 
 
    animation: river-horizontal 10s infinite linear; 
 
} 
 

 
.river-frame:after { 
 
    content: ""; 
 
    height: 100%; 
 
    width: 500%; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    background-size: 20% 100%; 
 
    background-image: url(https://dummyimage.com/600x400/000/fff); 
 
} 
 

 
.river-frame-img { 
 
    width: 100%; 
 
} 
 

 
@keyframes river-horizontal { 
 
    0% { 
 
    -webkit-transform: translateX(-100%); 
 
    transform: translateX(-100%); 
 
    } 
 
    100% { 
 
    -webkit-transform: translateX(-200%); 
 
    transform: translateX(-200%); 
 
    } 
 
}

<div class="river"> 
 
    <div class="river-frame"> 
 
    <img class="river-frame-img" src="https://image.ibb.co/iUbhYw/library.jpg"> 
 
    </div> 
 
</div>

がある私たちは、問題の原因を見つけることができない、任意のヘルプは、感謝。アニメーションでトランスフォームを使用したいだけだと考えてください。

Answer 1

Safariブラウザでは強制再描画が必要です。 jQueryを使用して行うことができるトリックがあります。ドキュメントにjQueryを含めます。そして、この小さなスクリプトを実行すると、物事は期待どおりに動作します。私は以下のスニペットを含んでいます。それが役に立てば幸い。

$(window).resize(function() { 
 
    $('.river').hide().show(0); 
 
})

.river { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.river-frame { 
 
    width: 100%; 
 
    position: relative; 
 
    animation: river-horizontal 10s infinite linear; 
 
} 
 

 
.river-frame:after { 
 
    content: ""; 
 
    height: 100%; 
 
    width: 500%; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    background-size: 20% 100%; 
 
    background-image: url(https://image.ibb.co/iUbhYw/library.jpg); 
 
} 
 

 
.river-frame-img { 
 
    width: 100%; 
 
} 
 

 
@keyframes river-horizontal { 
 
    0% { 
 
    -webkit-transform: translateX(-100%); 
 
    transform: translateX(-100%); 
 
    } 
 
    100% { 
 
    -webkit-transform: translateX(-200%); 
 
    transform: translateX(-200%); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="river"> 
 
    <div class="river-frame"> 
 
    <img class="river-frame-img" src="https://image.ibb.co/iUbhYw/library.jpg"> 
 
    </div> 
 
</div>

。