Closed Bug 755879 Opened 8 years ago Closed 7 years ago

broken menu on pitchfork.com mobile site

Categories

(Web Compatibility :: Mobile, defect)

ARM
Android
defect
Not set
normal

Tracking

(fennec-)

RESOLVED FIXED
Tracking Status
fennec - ---

People

(Reporter: matej, Unassigned)

References

()

Details

(Whiteboard: [webkitcss] [country-all][contactready])

Attachments

(1 file)

Web page or screen you were on when you saw the issue: www.pitchfork.com

Device: Droid Razr running Android 2.3

A number of issues:

Mobile site
1. Under "menu" at the top, there is a "2" instead of the expected double arrows
2. Clicking on the 2 turns it into a 1, "menu" becomes "hide" and it's all mashed together. WWW and Mobile appear as options (oddly formatted), but clicking on that area should open a drawer with a search field and a number of links.
3. The name "Pitchfork" in the header is plain text rather than the Pitchfork wordmark
4. There are 2s next to all the reviews and articles instead of double arrows
5. There is a large zero in the footer of the page instead of the logo
6. Also in the footer, the desktop and mobile toggle is stacked vertically instead of horizontally and pushed to the left instead of centered.

7. If you click through to any of the reviews, the formatting of the information next to the album cover is off (below instead of to the right) and instead of seeing the review score within a circle, there is a large 5 superimposed on top of it.
8. The formatting of the previous and next review field towards the bottom is again vertically aligned and pushed to the left, leaving a blank area on the right.

Desktop
1. Switching to the desktop version of the site, the page doesn't snap to the width of the screen, so part of it bleeds off the right. Zooming out corrects this, but it feels like it should load flush with the sides.
(In reply to Matej Novak [:matej] from comment #0)
> Mobile site
> 1. Under "menu" at the top, there is a "2" instead of the expected double
> arrows

This appears to be a font issue. They have a custom "Pitchfork" font-family in which "2" is the double arrows. This works fine in Chrome on the Galaxy Nexus but not in firefox (mobile or desktop).

> 2. Clicking on the 2 turns it into a 1, "menu" becomes "hide" and it's all
> mashed together.

Same font issue. "1" is the arrow pointing the other way.

> WWW and Mobile appear as options (oddly formatted), but
> clicking on that area should open a drawer with a search field and a number
> of links.

Not sure what's wrong here.

> 3. The name "Pitchfork" in the header is plain text rather than the
> Pitchfork wordmark

Same missing font issue.

> 4. There are 2s next to all the reviews and articles instead of double arrows
> 5. There is a large zero in the footer of the page instead of the logo

Ditto.

> 6. Also in the footer, the desktop and mobile toggle is stacked vertically
> instead of horizontally and pushed to the left instead of centered.

This behaviour seems expected from what I can see of the CSS; I'm not sure why it renders horizontally in Chrome.

> 
> 7. If you click through to any of the reviews, the formatting of the
> information next to the album cover is off (below instead of to the right)
> and instead of seeing the review score within a circle, there is a large 5
> superimposed on top of it.
> 8. The formatting of the previous and next review field towards the bottom
> is again vertically aligned and pushed to the left, leaving a blank area on
> the right.

At least some of this is again caused by the font not loading.

> 
> Desktop
> 1. Switching to the desktop version of the site, the page doesn't snap to
> the width of the screen, so part of it bleeds off the right. Zooming out
> corrects this, but it feels like it should load flush with the sides.

I filed bug 756232 for this as it seems to be a separate issue.


In general it seems like the big problem here is their font not loading, and once that is fixed we should look at the remaining issues to see what is left.
tracking-fennec: --- → ?
Component: General → Layout: Text
Product: Fennec Native → Core
QA Contact: general → layout.fonts-and-text
Assignee: nobody → chrislord.net
tracking-fennec: ? → 18+
Whiteboard: [Engagement] → [Engagement] [readability]
Summary: Problems on pitchfork.com mobile and desktop sites → Font not loading on pitchfork.com mobile and desktop sites
Assignee: chrislord.net → jfkthame
Is this still an issue, or has the site changed? Loading http://pitchfork.com/, I don't see anything that resembles the description above.
OK, ignore the preceding comment - just needed to set the appropriate UA string to make it load the mobile site.

The developer console reports:
[11:06:30.797] downloadable font: download failed (font-family: "Pitchfork" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed
source: http://cdn.pitchfork.com/mobile/fonts/pitchfork.otf @ http://cdn.pitchfork.com/mobile/css/frontend.152c5e7d223b.css

The page is located at http://m.pitchfork.com, so it can't load a font from http://cdn.pitchfork.com unless they set appropriate CORS headers.
Moving to Tech Evangelism, as this doesn't look like a Firefox bug.
Assignee: jfkthame → english-us
Component: Layout: Text → English US
Product: Core → Tech Evangelism
Version: Trunk → unspecified
Assignee: english-us → nobody
tracking-fennec: 18+ → -
Component: English US → Mobile
Duplicate of this bug: 820337
See also https://bugzilla.mozilla.org/show_bug.cgi?id=820337#c2 - pitchfork is also using webkit-specific transforms that makes the top pull-down menu appear different in FF versus the stock browser.
I sent them an email about these issues few days ago, still no response.
You're welcome to drop them an email: www@pitchfork.com
The font issue is fixed, the menu problem still there.

http://cdn.pitchfork.com/mobile/css/frontend.94dbfa93059d.css

body>nav.auto{-webkit-transition:-webkit-transform 250ms ease-out}body>nav .swipe{clear:both;background:#333;border-bottom:1px solid #222;border-top:1px solid #222;margin-top:-1px;-webkit-box-shadow:0 5pt 5pt rgba(0,0,0,.2)}

This code in http://cdn.pitchfork.com/mobile/js/frontend.32df0286b704.js needs fixing to make the menu slide:

if(f.hasClass("active")){$("nav").css({"-webkit-transform":"translateY("+b+"px)"})}else{$("nav").css({"-webkit-transform":"translateY(0)"})}

There is also quite some display:-webkit-box;-webkit-box-orient:horizontal usage.
Summary: Font not loading on pitchfork.com mobile and desktop sites → broken menu on pitchfork.com mobile site
Whiteboard: [Engagement] [readability] → [webkitcss][contactready]
Contacted www@pitchfork.com with the summary of the issues and a link to here.

* The top menu is still an issue.
* Firefox OS receives the desktop version.
Assignee: nobody → kdubost
Status: NEW → ASSIGNED
Hardware: Other → ARM
Whiteboard: [webkitcss][contactready] → [webkitcss] [contactready] [country-all]
Any luck with a response?
Flags: needinfo?(kdubost)
I got an answer that they were looking into it on 2013-11-28. I had forgotten to change the flags.
On the other hand, I just tested and we are receiving the mobile site now on Firefox for Android.

Firefox OS is still receiving the desktop content. 
I will contact them so Firefox OS receives the same treatment than Firefox for Android. 

Thanks Adam for waking this up.
Flags: needinfo?(kdubost)
Whiteboard: [webkitcss] [contactready] [country-all] → [webkitcss] [sitewait] [country-all]
And this is fixed.
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
I don't understand why this is "fixed", since most of the bug's description is still reproducable: points 2, 6, 8 and part of 7.
I'm using Firefox for Android 27 under Galaxy S3.
Can anyone confirm & reopen?
@dror3go.

On using Firefox Android version 27.0 at m.pitchfork.com and none of the issues mentioned in the first comment are visible. I get the site as it should display.
The font issues appear to be fixed... I get a slight "flash of unstyled font" as the page loads (seeing the 2 instead of the menu arrow). But that's not really a show stopper.

Here's what happens when you click on the menu in Firefox for Android 27: https://cloudup.com/iMt6FYC9NDG
Compare to Chrome: https://cloudup.com/iqF1VVn9KU2

Something is not quite right, I suspect some CSS issues. Assigning to myself until we know what's up.
Assignee: kdubost → miket
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Whiteboard: [webkitcss] [sitewait] [country-all] → [webkitcss] [country-all][notcontactready]
Layout issues are due to -webkit- only CSS for the menu (and other things) at http://cdn.pitchfork.com/mobile/css/frontend.645c4623ace4.css.

Hallvord, can you generate a report from compatipede for the CSS?
Whiteboard: [webkitcss] [country-all][notcontactready] → [webkitcss] [country-all][contactready]
Assignee: miket → nobody
Attached file pitchfork.json
issue analysis attached.

Site also uses window.orientation.
Flags: needinfo?(hsteen)
Sent to the contacts at pitchfork.

Hi everyone,

We reopened the bug, because there are still minor issues related to webkit CSS only and that can be easily fix. Sorry about that. So let's see.

The most pressing issue seems related to the use of flexbox according to the webkit syntax without the equivalent for other browsers AND the new webkit implementations. So it might even break in the future on webkit browsers.

There are things like:

    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-pack:center;
    -webkit-box-align:start;

The new syntax for flexbox is slightly different.
New syntax support is for Chrome 21+, Safari 6.1+, Firefox 22+, Opera (& Opera Mobile) 12.1+, IE 11+, and Blackberry 10+. So it's all benefits for pitchfork to switch to the new syntax.
http://caniuse.com/#feat=flexbox

See here for an article about old and new syntax being combined.
http://css-tricks.com/using-flexbox/


The rest of the issues are even easier to fix. It would be neat to put at least the prefix less version of the CSS properties for things like box-shadow, border-radius, transition, etc.

Be careful on gradient which have a slightly different syntax in old Webkit and new Webkit.
We can dance!
The amazing people at pitchfork fixed it. 
A beautiful example how fixing flexbox to new syntax is a good thing!
Status: REOPENED → RESOLVED
Closed: 7 years ago7 years ago
Resolution: --- → FIXED
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.