Closed Bug 1114674 Opened 5 years ago Closed 4 years ago

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

Categories

(Web Compatibility :: Mobile, defect)

Other
Android
defect
Not set

Tracking

(Not tracked)

RESOLVED WORKSFORME

People

(Reporter: froydnj, Unassigned)

References

()

Details

(Whiteboard: [mobile-compat-form] [css] [yahoo] [contactready])

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
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?
Status: UNCONFIRMED → NEW
Ever confirmed: true
Whiteboard: [mobile-compat-form] → [mobile-compat-form] [css] [yahoo] [contactready]
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.
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;
}
Duplicate of this bug: 1085103
Fixed.
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → WORKSFORME
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.