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)
Tracking
(Not tracked)
RESOLVED
FIXED
People
(Reporter: navidazizi, Assigned: karlcow)
References
()
Details
(Whiteboard: [clientsniff][country-ca][webkitcss][sitewait])
Attachments
(1 file)
38.65 KB,
image/png
|
Details |
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.
Comment 1•11 years ago
|
||
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
Comment 2•11 years ago
|
||
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..)
URL: http://m.thestar.com
Whiteboard: [clientsniff][country-ca]
Comment 3•11 years ago
|
||
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]
Assignee | ||
Comment 4•10 years ago
|
||
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
Assignee | ||
Comment 5•10 years ago
|
||
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.
Assignee | ||
Comment 6•10 years ago
|
||
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">
Assignee | ||
Comment 7•10 years ago
|
||
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
Assignee | ||
Comment 8•10 years ago
|
||
What the toronto star looks like in Firefox Android.
Assignee | ||
Comment 9•10 years ago
|
||
Contacted through http://www.thestar.com/about/contactwebmaster.html
Assignee | ||
Updated•10 years ago
|
Whiteboard: [clientsniff][country-ca][webkitcss][contactready] → [clientsniff][country-ca][webkitcss][sitewait]
Comment 10•10 years ago
|
||
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.
Comment 11•10 years ago
|
||
Fixed. Looks good. :) Tested in FxAndroid, FxOS and with spoofing on desktop.
Status: ASSIGNED → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Assignee | ||
Comment 12•9 years ago
|
||
See https://webcompat.com/issues/1128
Updated•5 years ago
|
Product: Tech Evangelism → Web Compatibility
Updated•22 days ago
|
Component: Mobile → Site Reports
You need to log in
before you can comment on or make changes to this bug.
Description
•