1114674 - page layout is far too wide when compared with, e.g. Safari on iOS

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect)

Description

[Nathan Froyd [:froydnj]]

Site: http://weather.yahoo.com/
page layout is far too wide when compared with, e.g. Safari on iOS

:: Steps To Reproduce

1. Visit weather.yahoo.com

:: Expected Result

No horizontal scrolling should be required to view the "Forecast", "Details", "Precipitation", etc. information

:: Actual Result

The aforementioned boxes are stretched to ~3x the screen width.

:: Additional Information

Software Version: Nightly
Device Information: Samsung Galaxy Nexus
Reporter's User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:37.0) Gecko/20100101 Firefox/37.0

Comment 1

[Hallvord R. M. Steen [:hallvors]]

The "hourly" table is too wide and enlarges the rest of the page. It's the id="mediaweatherhourly_container" and children.

In Chrome, the descendant with id="hourly-scroll-content" has this style:
style="-webkit-transform: matrix(1, 0, 0, 1, 346, 0); transform: translate(0px, 0px) translateZ(0px);"

and when the hourly table is scrolled, the scrolling is done through -webkit-transform and transform styling:

style="-webkit-transform: translate(-925.745257987105px, 0px) translateZ(0px); transform: translate(-811px, 0px) translateZ(0px);"

I assume that the problem is we miss some style that is equivalent to the matrix() function if it clips the width of the element?

Comment 2

[Karl Dubost💡 :karlcow]

Note that when loading the site, the page is displayed well. Then suddenly switch to something wider.

On an ipod touch old generation, the design is broken too. Background image doesn't fit the full screen.

The part with "Hourly" is supposed to be scrollable from the right to the left. So an overflow type, but the box should be bigger than the viewport.


The design seems to rely partly on old flexbox. That's already an issue. 


.ct-box,.yui3-sidebar .ct-box-hd,.ct-box-bd,.ct-h-nav,.ct-b-nav,.ct-id,.ct-box-bd .ct-stack,.ct-row,.ct-f{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:box
}

.ct-box-bd,.ct-id-name,.ct-b-nav,.ct-rl,.ct-l,.yui-sv-title,.ct-row .ct-row{
	-webkit-box-flex:1;
	-moz-box-flex:1;
	-ms-flex-order:1;
	box-flex:1
}

.ct-id-name{
	font-weight:700
}

.ct-box,.ct-box-bd .ct-stack,.ct-b-nav,.yui-sv-bd{
	-webkit-box-orient:vertical;
	-moz-box-orient:vertical;
	-ms-flex-direction:column;
	box-orient:vertical
}

.ct-h-nav,.ct-row{
	-webkit-box-align:center;
	-moz-box-align:center
}

Also:

This property when deactivated, makes the forecast fit in the viewport. but also destroy the hourly scroll

.yom-app.yom-weather-hourly #hourly-scroll-content {
    white-space: nowrap;
}


Still investigating.

Comment 3

[Karl Dubost💡 :karlcow]

ok my first intuition was right.
Change the flexbox from old moz to new flexbox and everything is working.
This is the only thing to do. Below:


.ct-poor {
    overflow: auto;
    height: auto;
    display: flex;
    flex-direction: column;
}

.ct-poor .ct-box {
    display: flex;
    height: auto;
}

.ct-box, .ct-box-bd .ct-stack, .ct-b-nav, .yui-sv-bd {
    flex-direction: column;
}

Comment 5

[Karl Dubost💡 :karlcow]

Fixed.