背景位置轉換在Safari中不起作用

Question

我正在更改懸停時元素的背景位置，它在鉻上正常工作，但是當我在safari上嘗試時，背景會快速上下跳動，我試過應用一些修正我從谷歌搜索發現，它仍然沒有工作，這裏是代碼（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; 
}