safari 的 webkit 為什麼會被 Google fork 成 blink
我覺得可能是太多的CSS3屬性沒有標準化的關係
這幾天遇到的跨裝置版面問題
一個是 transform 的 translate3d 屬性
-webkit-transform: translate3d(300px,0,0);
-ms-transform: translate3d(300px,0,0);
-o-transform: translate3d(300px,0,0);
transform: translate3d(300px,0,0);
舊版的IPhone似乎還是會有支援度的問題
另一個 transition 的屬性
-webkit-transition: width 2s, height 4s; /* Safari */
transition: width 2s, height 4s;
參考連結：
CSS3 2D Transforms
CSS3 3D Transforms
Translate3d doesn’t move embedded element in Safari (Windows only)
上面兩個都是動畫相關的屬性
另外有個排版的屬性 display 的 flex 屬性
display: -webkit-box; /* OLD – iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD – Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER – IE 10 */
display: -webkit-flex; /* NEW – Chrome */
display: flex; /* NEW, Spec – Opera 12.1, Firefox 20+ */
這是列在 flex box 裡面的屬性
參考連結：
Using Flexbox: Mixing Old and New for the Best Browser Support
Flex Box not working in Safari (stackoverflow)
CSS flex-direction Property