Materialise的波影響不會在Safari

正常工作，我用Materialise公司和嘗試激活waves風格：Materialise的波影響不會在Safari

<a class="btn-floating btn-large waves-effect waves-light red" > 
    <i class="mdi-content-add"></i> 
</a>

波影響正常工作，在Chrome/Android的但不是在Safari/iOS版。

由於某種原因，當我點擊按鈕時，波形分佈在矩形而不是圓形。

我試圖重寫風格，但它沒有任何意義：

.waves-ripple{ 
    border-radius: 50% !important; 
}

這裏是CODEPAN。嘗試在Chrome中打開並在Safari中打開。

任何想法如何解決它？

[編輯]

現在光變通方法是減少波的大小。這是我做過什麼至今：

.my-btn-floating .waves-ripple { 
    width: 8px !important; 
    height: 8px !important; 
}

CODEPAN 2

[編輯2]

這也恰好在Android S3/4，但不是Nexus4/5

來源

2015-04-03 snaggs

你可以在插件頁面檢查它的默認問題http://materializecss.com/waves.html – 2015-04-03 12:17:07

有一個問題發佈在github上這個https://github.com/Dogfalo/materialize/issues/1019 – Turnip 2015-04-03 12:31:11

你可以使用'mask-image'建議[這裏]（http://stackoverflow.com/questions/5736503/how-to-make-css3-round-corners-hide-overflow-in-chrome-opera/10296258 ＃10296258）但你會失去在Safari中使用盒子陰影的能力，並且邊緣的渲染有點粗糙 - [示例]（http://codepen.io/anon/pen/OPGdqg） – Turnip 2015-04-03 12:51:10

這似乎成爲known issue由於long standing Safari bug

您可以使用mask-image作爲一種變通方法如所描述的here

a { 
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); 
}

它可以是使用一個CSS破解僅定位的Safari爲邊緣渲染的質量有用看起來被縮小 - Safari hacks。

來源

2015-04-05 19:35:35 Turnip

它不僅Safari，Android S3/4使用鉻和相同的問題發生。再次感謝 – snaggs 2015-04-05 20:29:46

Materialise的波影響不會在Safari

回答

相關問題