search

TheTyee / design-article.thetyee.ca

Working in the open on The Tyee's new article page design
http://thetyee.github.io/design-article.thetyee.ca/
Creative Commons Zero v1.0 Universal
3 stars 0 forks source link

JS margin is breaking layout on live site in Chrome #350

Closed alexgreen closed 8 years ago

alexgreen commented 8 years ago

http://thetyee.ca/News/2016/09/12/Forest-Parkour-BC/

There's something forcing the page to be wider than the viewport causing horizontal scrolling at all viewport widths. This occurs on Chrome OSX desktop, but I'm not seeing this on mobile, nor am I seeing this occur in OSX firefox or safari. See attached screenshots.

It seems to be caused by this negative margin which is applied by js when the featured-media object is shorter than the featured ad:

<section class="featured-media" data-dev-object-descrip="02-organisms/article/featured-media" style="margin-bottom: -126px;">

I have no idea why this would affect the width of any container, but when I remove the margin the problem disappears, so it seems related.

@phillipadsmith @MrBryan are you also seeing this?

screen shot 2016-09-12 at 9 30 12 pm

screen shot 2016-09-12 at 9 30 59 pm

MrBryan commented 8 years ago

I can scroll slightly horizontally at 1200+px but when i do $("*").css("border", "1px solid red"); nothing shows up outside the body/html bounds so I'm not sure what's causing it. Luckily it's pretty inconsequential for the ux so I don't think it's actually high priority unless you're seeing other effects

MrBryan commented 8 years ago

body {overflow-x:hidden } fixes it

MrBryan commented 8 years ago

i'll just do that for now as there is no point at which we want horizontal scrolling as far as I can think

MrBryan commented 8 years ago

431dbd8 fixed