Fix broken layout on Safari

Kuniwak · Kuniwak · commit cf169961f804 · 2015-03-10T11:21:35.000+09:00
diff --git a/test/stage1/style.css b/test/stage1/style.css
@@ -1,11 +1,13 @@
 .js-training {
+  display: -webkit-flex;
   display: flex;
   list-style: none;
   margin: 10px;
   padding: 0;
 }
 
 .js-training li {
+  -webkit-flex: 1;
   flex: 1;
   margin: 0;
   padding: 0;
@@ -31,6 +33,7 @@
 }
 
 .js-training .turquoise {
+  -webkit-flex: 0.5;
   flex: 0.5;
   background-color: turquoise;
 }
@@ -40,7 +43,7 @@
   margin: 0;
   height: 40px;
   font-weight: bold;
-  font-size: 130%;
+  font-size: 1;
 }
 
 .js-training [data-js-training="blueviolet"] {
@@ -60,6 +63,7 @@
 }
 
 .js-training .mediumturquoise {
+  -webkit-flex: 0.5;
   flex: 0.5;
   background-color: mediumturquoise;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,13 @@`
`1`	`1`	`.js-training {`
	`2`	`+ display: -webkit-flex;`
`2`	`3`	`display: flex;`
`3`	`4`	`list-style: none;`
`4`	`5`	`margin: 10px;`
`5`	`6`	`padding: 0;`
`6`	`7`	`}`
`7`	`8`
`8`	`9`	`.js-training li {`
	`10`	`+ -webkit-flex: 1;`
`9`	`11`	`flex: 1;`
`10`	`12`	`margin: 0;`
`11`	`13`	`padding: 0;`
`@@ -31,6 +33,7 @@`
`31`	`33`	`}`
`32`	`34`
`33`	`35`	`.js-training .turquoise {`
	`36`	`+ -webkit-flex: 0.5;`
`34`	`37`	`flex: 0.5;`
`35`	`38`	`background-color: turquoise;`
`36`	`39`	`}`
`@@ -40,7 +43,7 @@`
`40`	`43`	`margin: 0;`
`41`	`44`	`height: 40px;`
`42`	`45`	`font-weight: bold;`
`43`		`- font-size: 130%;`
	`46`	`+ font-size: 1;`
`44`	`47`	`}`
`45`	`48`
`46`	`49`	`.js-training [data-js-training="blueviolet"] {`
`@@ -60,6 +63,7 @@`
`60`	`63`	`}`
`61`	`64`
`62`	`65`	`.js-training .mediumturquoise {`
	`66`	`+ -webkit-flex: 0.5;`
`63`	`67`	`flex: 0.5;`
`64`	`68`	`background-color: mediumturquoise;`
`65`	`69`	`}`