Closed Bug 842184 Opened 11 years ago Closed 10 years ago

Mobile version of m.thestar.com does not appear for Firefox for Android

Categories

(Web Compatibility :: Site Reports, defect)

Firefox 18
ARM
Android
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: navidazizi, Assigned: karlcow)

References

()

Details

(Whiteboard: [clientsniff][country-ca][webkitcss][sitewait])

Attachments

(1 file)

User Agent: Mozilla/5.0 (Windows NT 6.0; WOW64; rv:20.0) Gecko/20130212 Firefox/20.0
Build ID: 20130212042017

Steps to reproduce:

Go to m.thestar.com


Actual results:

The desktop version of the site appeared.  Even when I switch my agent to the normal Android browser with the Phony add-on, the desktop version appears.


Expected results:

The mobile version of the site should have appeared.
Hello fellow Torontonian. The Star's redesign has regressed in the way they they do redirection based on user-agent detection.

http://www.thestar.com/etc/designs/thestar/mainlib/js/libs/redirection-mobile.js

I've forwarded them an email. There's nothing we can do unless we outreach to them.
Status: UNCONFIRMED → NEW
Component: General → Mobile
Ever confirmed: true
Product: Firefox for Android → Tech Evangelism
Hm.. it doesn't forward me to the desktop site, but the site we get looks very broken in FxAndroid. My first guess is some crucial -webkit- CSS property? Seems they use flexbox.

(Now, FirefoxOS browser is indeed forwarded to the desktop site..)
Whiteboard: [clientsniff][country-ca]
I think we should just contact them again.. If they would like advice I'm sure we can dig into the CSS and recommend something.
Whiteboard: [clientsniff][country-ca] → [clientsniff][country-ca][webkitcss][contactready]
Yes definitely broken in many ways.

http://twitter.com/MozWebCompat/status/411580225969856512
Assignee: nobody → kdubost
Status: NEW → ASSIGNED
OS: Windows Vista → Android
Hardware: x86_64 → ARM
Seen they are using http://read.thestar.com/redirect.js

  Pressly redirect script
  The Purpose of this script is to detect device support and redirect valid
  devices to the Pressly application. Redirects from homepage will go straigt
  to the application. Deep linking is also available, a user entering your site
  from a google link to an article will be redirected to the same article within
  Pressly if it exists.
The headers are quite… webkit friendly.

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1" />
  <link href="images/icon/Icon.png" sizes="57x57" rel="apple-touch-icon-precomposed">
  <link href="images/icon/Icon-72.png" sizes="72x72" rel="apple-touch-icon-precomposed">
  <link href="images/icon/Icon@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">
  <link href="images/icon/Icon-72@2x.png" sizes="144x144" rel="apple-touch-icon-precomposed">
  <link href="images/splash/apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
  <link href="images/splash/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
  <link href="images/splash/apple-touch-startup-image-640x1096.png" media="(device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
  <link href="images/splash/apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
  <link href="images/splash/apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
  <link href="images/splash/apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
  <link href="images/splash/apple-touch-startup-image-1496x2048.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
Oh I guess… I wonder… They are using things like 

#splash-inner {
  text-align: center;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
  -ms-flex: 1, 0, 0px;
}

#progress-bar-container {
  display: -webkit-box;
  display: -moz-box;
  display: -o-box;
  display: box;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  box-pack: center;
  -ms-flex-packL: center;
  padding-top: 50px;
  position: relative;
}

This seems to be XUL syntax and not the last flexbox syntax?

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Attached image thestar-broken.png
What the toronto star looks like in Firefox Android.
Whiteboard: [clientsniff][country-ca][webkitcss][contactready] → [clientsniff][country-ca][webkitcss][sitewait]
One issue that has been puzzling: even if you fix the flexbox code to make the layout correct, the images for each article title on the main page will fail to appear.

The reason: they have some styling on the .image-preview:before pseudoclass. This CSS seems to have been generated with some framework, and it does go to great lengths to handle all browsers in its linear-gradient syntax:

.column-listview .article-preview .image-preview:before,
.column-listview .video-article-preview .image-preview:before,
.column-listview .article-preview.ad-view .image-preview:before,
.column-listview .video-article-preview.ad-view .image-preview:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000), color-stop(0.3, #000), color-stop(0.85, #000), color-stop(1, #000));
  background-image: -webkit-linear-gradient(top, #000 0%, #000 30%, #000 85%, #000 100%);
  background-image: -moz-linear-gradient(top, #000 0%, #000 30%, #000 85%, #000 100%);
  background-image: -o-linear-gradient(top, #000 0%, #000 30%, #000 85%, #000 100%);
  background-image: -ms-linear-gradient(top, #000 0%, #000 30%, #000 85%, #000 100%);
  background-image: linear-gradient(top, #000 0%, #000 30%, #000 85%, #000 100%);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #000), color-stop(30%, rgba(0,0,0,0.3)), color-stop(85%, rgba(0,0,0,0)));
}

However.. the actual *values* are somewhat different. The WebKit code contains RGBA values that makes the :before element mostly semi-transparent and allows the images to shine through. Other browsers are not told to create transparent gradients, so they will overlay the article image with a solid black element.
Fixed. Looks good. :) Tested in FxAndroid, FxOS and with spoofing on desktop.
Status: ASSIGNED → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Product: Tech Evangelism → Web Compatibility
Component: Mobile → Site Reports
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: