1036623 - mlb.mlb.com/mobile has display issues

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Dchart]

User Agent: Mozilla/5.0 (Android; Mobile; rv:30.0) Gecko/30.0 Firefox/30.0 (Nightly/Aurora)
Build ID: 20140605172539

Steps to reproduce:

Go to mlb.mlb.com/mobile
Select scores 
Go to any game in progress 
Select the "BOX" tab
Nothing displays 
Note: Opera mobile displays the tab 

Nexus 5 -, Android 4.4.4


Actual results:

Sorry I do not know where to find the version.

Comment 1

[Kevin Brosnan [Ex-Mozilla]]

I can confirm this behavior however this is likely to be a website coding issue.

Comment 2

[Karl Dubost💡 :karlcow]

To be clearer on how to reproduce

1. Go to http://m.mlb.com/scoreboard/ (responsive design)
2. Click on one of the game. For example
   http://m.mlb.com/game/2014/07/09/381907/yankees-vs-indians
3. Click on one of Live, Box, Plays, Field
   Nothing displays.


They have issues with Flexbox missing the new syntax in instances of CSS here and there, but it should be analyzed a bit more. So that's one issue at least.

.ScrollPanelView-pages{
	width:100%;
	display:inline-block;
	display:-webkit-box;
	-webkit-box-orient:horizontal;
	-webkit-box-align:start;
	-webkit-box-flex:1;
	display:-webkit-flexbox;
	-webkit-flex-direction:row;
	display:-ms-flexbox;
	display:flexbox;
	z-index:20
}

On the JavaScript front they are using Zepto. touchevent? Mike? Hallvord?

Comment 3

[Mike Taylor [:miketaylr]]

If I remove the transform: translate from this element with "Box" selected, I can see the content--it's just a bit further down on the page. (It seems like this should be fine though?). Seems like "Wrap", "Box", and "Plays" are supposed to be translated into view, 0, -100%, -200% respectively but there's some other CSS layout weirdness at play.

<div style="transition: -moz-transform 0s cubic-bezier(0, 0, 0.2, 1) 0s; transform: translate(-100%, 0px);" data-loading="false" class="ScrollPanelView-pages">

Comment 4

[Karl Dubost💡 :karlcow]

So interesting thing, I see a lot of people which could be good contacts, but impossible to find any active twitter accounts or Web sites so far. They exist just not updated for ages.

May have found a human person to interact with 
http://www.linkedin.com/in/acorrigan
http://twitter.com/MozWebCompat/status/488562320889479171

Some other Bugs for MLB Bug 958708 and Bug 951412

Comment 5

[Karl Dubost💡 :karlcow]

When I try to reproduce, there is an additional issue.

1. Go to http://mlb.mlb.com/
2. on Nexus 5, you get redirected to http://m.mlb.com/ (FINE)
   on Firefox Android, you stay on http://mlb.mlb.com/ (WRONG)

Then second test.

1. Go to http://m.mlb.com/
2. On Nexus 5 and Firefox Android, after the interstitial for the native app, you get the mobile site. Note that it is working perfectly in Firefox Android.

to note that they have forgotten the unprefixed version of some properties, for example.

.layout .nav-tabset ul li.active a{
	font-weight:normal;
	color:#333;
	background-repeat:no-repeat;
	background-color:#f2f2f2;
	background-image:-moz-linear-gradient(center top,#e0e0e0 0,#f2f2f2 70%);
	background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#e0e0e0),color-stop(0.7,#f2f2f2))
}

which means it will fail in Microsoft products or old Opera, etc.

Another issue is that their mobile layout is failing when screen < 319px. They have chosen 320px as a minimum magic number.

When I click on Scores, I get the right mobile version.

So one of the issue is really about the lack of redirection to the mobile site initially.
Then the flexbox issues are kicking in for the scorecard.

Comment 6

[Karl Dubost💡 :karlcow]

The account contacted initially in Comment #4 seems to have been taken over. 
We need to find another contact.
Trying http://twitter.com/MozWebCompat/status/569655064442187776

Trying also to send an email to alex corrigan too.

Comment 7

[Karl Dubost💡 :karlcow]

Contacted through email following up their twitter reaction.

Comment 8

[Karl Dubost💡 :karlcow]

to note https://webcompat.com/issues/880

Comment 9

[Karl Dubost💡 :karlcow]

fixed by layout.css.prefixes.webkit;true