：在Safari中懸停動畫時使用CSS內容中斷

Question

我正在使用視口單元buggyfill來覆蓋vw和vh度量。我不得不在css中使用content來創建一個好的後備，所有工作正常，但是，由於我不明白的原因，Safari不會讓我動畫:hover如果它的代碼裏面有css content，這裏是問題（在Safari 8/Mac和iOS8上）

https://fiddle.jshell.net/nc9chuod/

任何想法測試什麼我做錯了嗎？

div { 
 
    border: 1px solid black; 
 
    padding: 20px; 
 
    position: fixed; 
 
    width: 100vw; 
 
    min-height: 50vh; 
 
    -webkit-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
    content: "not-a-problem"; 
 
    overflow: hidden; 
 
} 
 
div:hover { 
 
    -webkit-transform: translate3d(50vw, 0, 0); 
 
    transform: translate3d(50vw, 0, 0); 
 
    content: "not-working"; 
 
}

<div id="transition"></div>

Answer 1

的content屬性只能在僞元件一起使用。

從https://developer.mozilla.org/en-US/docs/Web/CSS/content：

內容CSS屬性用於與::之前和之後::僞元素，以生成式中的元件的內容。

這可能是Safari中的突破（在Safari中針對Windows進行測試和確認）。嘗試移動content:"not-working";到div:hover:after代替：

div { 
 
border: 1px solid black; 
 
padding: 20px; 
 
position: fixed; 
 
width: 100vw; 
 
min-height: 50vh; 
 
-webkit-transition: all 0.3s ease-out; 
 
transition: all 0.3s ease-out; 
 
overflow: hidden; 
 
} 
 

 
div:hover { 
 
-webkit-transform: translate3d(50vw,0,0); 
 
transform: translate3d(50vw,0,0); 
 
} 
 

 
div:hover:after { 
 
content:"not-working"; 
 
}

<div id="transition"></div>

Answer 2

至於我可以看到有沒有必要內容「」屬性，因爲它是唯一與使用：&前：等以後

我改變了：將鼠標懸停在空白左邊：50％，並達到相同的效果。

我不確定在safari中使用translate3d，因爲我從未親自使用它。

如果你不知道它爲什麼瀏覽器接受什麼，請查看本網站。 http://caniuse.com/

這是我做的。

div { 
border: 1px solid black; 
padding: 20px; 
position: fixed; 
width: 100vw; 
min-height: 50vh; 
-webkit-transition: all 0.3s ease-out; 
-moz-transition: all 0.3s ease-out; 
-ms-transition: all 0.3s ease-out; 
-o-transition: all 0.3s ease-out; 
transition: all 0.3s ease-out; 
content: "not-a-problem"; 
overflow: hidden; 

} 

div:hover { 
margin-left: 50%; 
}