na.leagueoflegends.com - layout is messed up

[webcompat-bot]

URL: http://na.leagueoflegends.com/en/news/game-updates/patch/patch-622-notes
Browser / Version: Firefox Mobile 52.0
Operating System: Android 6.0
Problem type: Layout is messed up

Steps to Reproduce

1. Navigate to: http://na.leagueoflegends.com/en/news/game-updates/patch/patch-622-notes
2. …

Expected Behavior:

Actual Behavior:

From webcompat.com with ❤️

[MDTsai]

I can reproduce this issue on Firefox mobile Nightly and Chrome mobile 54. This page is not responsive.

The viewport size is set to device-width:

<meta name="viewport" content="width=device-width">

But body's min-width is 1000px:

html body {
    min-width: 1000px;
}

Looks like Chrome follow viewport width zoom to device-width but Firefox follows min-width.

[wisniewskit]

It certainly does look like they're using the meta-viewport tag incorrectly. The minimal value they give effectively tells the browser that they will adapt the layout to whatever device orientation and screen-size the user has, but their CSS isn't doing that.

The best thing for them to do here is probably to not mess with the meta-viewport tag at all (just remove it). Then browsers should render the same way Chrome does by default.

If for some user-unfriendly (read: not recommended) reason they want the page to start zoomed-in like Firefox, but still let the user scroll and zoom about themselves, then they need to be specific, since browsers seem to vary in what the default values are. Something like this should do the trick, if memory serves:

<meta name="viewport" content="width=device-width; initial-scale=1; user-scalable=1">

Edit: it would be amusing if they added the tag just to prevent the 300ms tap delay, given that it breaks more than it seems to solve...

[karlcow]

<meta name="viewport" content="width=device-width"> should be fine.
I think it's another use case for our viewport issue. On my plate.
whatwg/compat#62

Probably after Tech in Asia, I'll dive into this.

[karlcow]

The fact that the site is blown-up and there is the overflow-x

body.riotbar-present {
    margin: 0;
    margin-top: 52px;
    overflow-x: hidden; 
    padding: 0;
    position: relative;
}

means we can't scroll horizontally to see the full content AND (worse) we can't zoom out. That's probably the most important issue.

Removing the overflow-x: hidden would go a long way in making it more usable. To note that we can zoom-in, just not zoom-out.

[adamopenweb]

Their Twitter seems to be one way communication only: https://twitter.com/LeagueOfLegends

But @RiotGames is on Github. Maybe @Neamar or @clifferson can help us find a contact to get this fixed?

[Neamar]

Hey guys, just acknowledging the issue for now. I can probably give more context on this tomorrow :-)

[Neamar]

Ok, thanks for the report, that's definitely an issue.

As you've noticed, the current website is not responsive -- however, the bug you mention has already been fixed in our internal environments. It's part of a bigger package, so deployment may take some time while we ensure all teams are happy with the changes, but within a couple weeks this bug should be fixed!

[wisniewskit]

Thanks for the update, @Neamar!

[Neamar]

Hi there,

The fix is ready to go live, however it's likely not going to be pushed to prod before january. I'll be back with more news soon, sorry for the delay

[adamopenweb]

@Neamar that's great, thank you!

[Neamar]

This should now be fixed!

[adamopenweb]

Looks great, thanks for your help @Neamar! 😀
Closing this as fixed.