今天遇到的CSS問題 (safari)

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