Safari瀏覽器圓角失敗，溢出動畫過程中隱藏

小提琴隱瞞：http://jsfiddle.net/e8GR6/11/（更新）Safari瀏覽器圓角失敗，溢出動畫過程中隱藏

我已經四捨五入的相對定位outer div角落（必須保持realtively定位 - 這是很重要的）。我已經隱藏了該div的溢出，以便包含在其中的image和inner div也具有圓角。

除了Safari之外，它的功能非常強大。除Safari之外的任何東西都可以查看上面的小提琴，它看起來很棒，在Safari瀏覽器中查看並且inner div沒有圓角。我已經修復了image通過專門四捨五入來實現圓角。然而inner div將在最終的網站中生成動畫，所以我不能只是削減它的角落。據我所知，我需要溢出隱藏在Safari中工作，就像它在其他瀏覽器中一樣，或者我需要一個有效的解決方法。有任何想法嗎？ jQuery是一個選項，但我更喜歡非JavaScript的解決方案。

解決方案：看起來它是webkit中的一個bug。我的解決方案是在div變得明顯之前淡出div，但爲了後代：webkit.org/blog/181/css-masks。如果褪色不是一個可行的選擇，webkit css mask將能夠爲我消除那些討厭的角落。

來源

2014-01-10 fildred13

將thumb_overlay寬度更改爲153px，併爲border-bottom-left-radius和border-bottom-right-radius添加webkit定義。

-webkit-border-bottom-left-radius: 20px; 
-webkit-border-bottom-right-radius: 20px;

Fiddle.

來源

2014-01-10 17:12:22 QuestionMarks

看到我對Davidicus的答案的評論，因爲你的答案是一樣的。有用的，幾乎可以通過，但我要追求完美。 – fildred13

我更新了小提琴，以包括我的JS。應該清楚爲什麼頂角是一個醜陋的煩惱。 – fildred13

是的，我現在看到它。奇怪的是，它看起來像div滑落時沒有問題，但是當它滑落時，那些頂角不會在另一個div內「消失」，它們會繼續向下。我會多玩一點。 – QuestionMarks

將邊框半徑應用到彈出的div的左側和右側底部。並縮短寬度以匹配其容器。你會得到一個你正在尋找的圓角。我更新了你的提琴：

http://jsfiddle.net/e8GR6/10/

有兩件事情是傷害你。你的寬度比容器大，所以你不會看到子div的結尾，因爲溢出是隱藏的。我會用box-sizing: border-box;並設置width: 100%;

-webkit-background-clip: padding-box; 
    -moz-background-clip: padding; 
    background-clip:   padding-box;

將解決地址不被修剪的頂部。

來源

2014-01-10 17:11:52 Davidicus

，它作爲內部DIV的向上滑動，但是當它向下滑動動畫是醜陋的，因爲未四捨五入的頂部邊角分明滑「出」的形象。這是震動和不完美的。查看我在Safari中鏈接到的生產站點，您將看到我從一個div中的mouseOut時所表達的意思。 – fildred13

更新了我的小提琴。檢查是否適合你。 – Davidicus

@Davidicus - 這裏是你的小提琴的OP的js加入：http://jsfiddle.net/e8GR6/12/你可以看到在Safari中的問題，當div滑落，頂角不消失「內」母公司。 – QuestionMarks

Safari瀏覽器圓角失敗，溢出動畫過程中隱藏

回答

相關問題