剪輯路徑僅適用於第一個對象;導致其他人消失

Question

注意：這是以前用戶提出的same issue（但沒有解決問題）。

將剪輯路徑應用於我在本地主機上運行在Chrome上的網頁上的圖像時，它僅對第一個對象起作用。剩下的圖像（物體）完全消失。 但是，通過jsfiddle運行時，相同的代碼工作得很好。這裏是CSS：

.art1 > .pic1{ 
    width:60px; 
    height:60px; 
    float: left; 
    shape-margin: 4px; 
    shape-outside: circle(40% at 50% 50%); 
    -webkit-clip-path: circle(40% at 50% 50%); 
    margin-left: -1em; 
} 

.art2 > .pic2{ 
    width:60px; 
    height:60px; 
    float: left; 
    shape-margin: 4px; 
    shape-outside: circle(40% at 50% 50%); 
    -webkit-clip-path: circle(40% at 50% 50%); 
    margin-left: -1em; 

} 

.art3 > .pic3{ 
    width:60px; 
    height:60px; 
    float: left; 
    shape-margin: 4px; 
    shape-outside: circle(40% at 50% 50%); 
    -webkit-clip-path: circle(40% at 50% 50%); 
    margin-left: -1em; 
} 

這jsfiddle是用在我的網頁中使用的完全相同的代碼問題的演示。它顯示了三個相同的div，以及所有4幅圖像上的圓形剪輯路徑oworks。我問原始提交者他的評估是什麼：「這是由於瀏覽器錯誤 - 它在某些時候在Chrome和Firefox OS X中得到了修復。」

但是，我有最新版本的Chrome，它在從本地主機運行時遇到了這個問題。有什麼方法可以解決這個問題嗎？

Answer 1

當我在我的系統上的Chrome，Firefox和IE上再次嘗試這個jfiddle時，它給出了同樣的問題，當我嘗試使用移動設備上的chrome時，它工作正常。我的結論是，這個問題可能是由於操作系統 - 我在我的筆記本電腦上運行Windows 7。