背景位置遷移がSafariで動作しない

Question

ホバー上の要素の背景位置を変更していますが、クロム上で問題なく動作していますが、私がサファリで試してみると、背景が急速に上下にジャンプします。私はGoogle検索から見つけた、それはまだ動作していないいくつかの修正が、ここでのコード（HTML、オリジナルのルール、移行性、：ルールをホバー）である -

<div class="port-big"> 
    <a class="port-item campbell" href="http://www.campbellmgmt.com/" target="_blank"> 
    <div class="port-img"></div> 
    <h3 class="port-title">Campbell Property Management</h3> 
    <img class="port-logo" src="images/campbell-logo-white.png" /> 
    <p class="port-descr">Campbell Property Management was my largest project while I was at Juvo Web. The client was looking to completely update their website and 
    add some new features. After extensive research on property and real estate UI/UX I designed the new front end and implemented it on their website.</p> 
    </a> 
</div> 

.port-img { 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
    background-blend-mode: overlay; 
    background-size: cover; 
    background-position: center top; 
    background-position-x: 0%; 
    background-position-y: 0%; 
} 

.campbell .port-img { 
    background-image: url(../../images/campbell-screenshot.png); 
    background-color: #dd3a00; 
} 

.port-title, .port-descr, .port-logo, .port-img { 
    -webkit-transition: all ease-in-out 0.4s, 
         background-position linear 24s; 
    transition: all ease-in-out 0.4s, 
       background-position linear 24s; 
} 

.port-big .port-item:hover .port-img { 
    background-position: center bottom; 
    background-position-x: 0%; 
    background-position-y: 100%; 
} 

Answer 1

は、私は答えを見つけました、バックグラウンドポジションの移行をそれ自身のルールに分けたときにうまくいきました。このようになりました -

.port-img { 
    -webkit-transition: background-position linear 24s; 
    -moz-transition: background-position linear 24s; 
    -o-transition: background-position linear 24s; 
    transition: background-position linear 24s; 
}