URL: http://mw.nikkei.com/sp/
Browser / Version: Firefox 39.0
Operating System: Android
Problem type: Layout is messed up
Steps to Reproduce
- Navigate to: http://mw.nikkei.com/sp/
Expected Behavior:
Having a nice mobile layout for all boxes
Actual Behavior:
The layout is mostly fine some glitches here and there. The issue is that it will break as soon as the old flexbox are deprecated.
They use old CSS flexbox, which will be not supported in the future. They had an intent to support all browsers, but the new syntax is not in there:
They can fix it easily with http://hallvord.com/temp/moz/cssfixme.php
For example the top navigation is
#sectionNav>.wrapper{
display:box;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
display:-ms-flexbox;
box-align:start;
-moz-box-align:start;
-webkit-box-align:start;
-o-box-align:start;
-ms-box-align:start;
width:100%
}
#sectionNav>.wrapper>.menu_left{
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
-o-box-flex:1;
-ms-box-flex:1;
box-ordinal-group:1;
-webkit-box-ordinal-group:1;
-moz-box-ordinal-group:1;
-o-box-ordinal-group:1;
-ms-box-ordinal-group:1
}
#sectionNav>.wrapper>.menu_right{
text-align:center;
box-ordinal-group:2;
-webkit-box-ordinal-group:2;
-moz-box-ordinal-group:2;
-o-box-ordinal-group:2;
-ms-box-ordinal-group:2
}
To fix it:
#sectionNav>.wrapper{
display: box;
display: -moz-box;
display: -webkit-box;
display: -o-box;
display: -ms-box;
display: -ms-flexbox;
box-align: start;
-moz-box-align: start;
-webkit-box-align: start;
-o-box-align: start;
-ms-box-align: start;
width: 100%;
display: flex;
align-items: flex-start;
}
#sectionNav>.wrapper>.menu_left{
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
-ms-box-flex: 1;
box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-o-box-ordinal-group: 1;
-ms-box-ordinal-group: 1;
flex: 1 auto;
order: 1;
}
#sectionNav>.wrapper>.menu_right{
text-align: center;
box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-o-box-ordinal-group: 2;
-ms-box-ordinal-group: 2;
order: 2;
}
country: jp
URL: http://mw.nikkei.com/sp/
Browser / Version: Firefox 39.0
Operating System: Android
Problem type: Layout is messed up
Steps to Reproduce
Expected Behavior:
Having a nice mobile layout for all boxes
Actual Behavior:
The layout is mostly fine some glitches here and there. The issue is that it will break as soon as the old flexbox are deprecated.
They use old CSS flexbox, which will be not supported in the future. They had an intent to support all browsers, but the new syntax is not in there:
They can fix it easily with http://hallvord.com/temp/moz/cssfixme.php
For example the top navigation is
To fix it:
country: jp