Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bottom Scroll bars at 768px width #35

Closed
rockerBOO opened this issue Jul 26, 2015 · 15 comments
Closed

Bottom Scroll bars at 768px width #35

rockerBOO opened this issue Jul 26, 2015 · 15 comments
Labels
bug priority: high

Comments

@rockerBOO
Copy link

There are scroll bars at this point or so. Replicated in latest Firefox on Linux, Windows.
@amorey
Copy link
Member

amorey commented Jul 27, 2015

Are you seeing the bug on the documentation site (https://www.muicss.com) or on your own site? Can you paste in the HTML to reproduce it? I checked Firefox 39 on Linux 14.04 and Windows 7 and I'm not seeing bottom scroll bars at least on the documentation site.

@rockerBOO
Copy link
Author

Both http://rockerboo.net/ and http://discovery.rockerboo.net/ have the issue. I do not think im doing anything special to the styling, but the grid seems to not be the right size for a brief number of width pixels.

Thanks amorey 😃

@amorey
Copy link
Member

amorey commented Jul 27, 2015

Ok, thanks. I was able to reproduce it in Firefox on OS X. It looks like the problem is being caused by the padding on the <header> element. If you add the padding to the container instead, it should produce the same effect without causing the <header> to overflow.

@rockerBOO
Copy link
Author

I don't think the <header> is causing it here. The width on the containers is set to a straight 768px at 768px, which doesn't account for the "dropshadow" on the panels, which causes it to be too big for the window.

@amorey
Copy link
Member

amorey commented Jul 27, 2015

The panel is inside a container which has a padding of 15px so the panel itself shouldn't cause the overflow on the body. To test out if it's a problem with the panel, you can set the overflow property of the container to hidden to see if the overflow on the body goes away.

The container has a fixed width of 768px until the breakpoint at 768px at which point it has a fluid width (100% of parent) so that shouldn't cause the body to overflow.

Taking a closer look, the scrollbar appears at a viewport width of 777px and disappears at a browser width of 768px. I think what's happening is that at 777px, the container has a fixed width of 768px but the <header> has 1em of padding (10px) for a total width of 778px. At 768px, the container has a fluid width so the <header> no longer causes the body to overflow. So from 777px to 769px, the <header> is wider than the <body>.

@rockerBOO
Copy link
Author

Thanks for taking an in-depth look. The header element is only one 1 of those 2 sites, and they both have the issue. Removing the whole header element doesn't solve the issue.

I have made an example to showcase it without all the extra things on the page. I was trying to isolate the issue down to some core thing, but it only seems to happen when it scrolls. Removing the width on the .mui-container for the 768 media query does fix it for me.

No-Scroll:
http://discovery.rockerboo.net/mui.html

Bottom Scroll in a grid:
http://discovery.rockerboo.net/mui-bottom-scroll.html

Bottom Scroll with just text:
http://discovery.rockerboo.net/mui-bottom-scroll-text.html

Thanks amorey 😄

@amorey
Copy link
Member

amorey commented Jul 28, 2015

@rockerBOO It looks like the bottom scroll in Firefox is happening because Firefox takes into account the width of the vertical scrollbar when calculating the viewport width:
http://www.sitepoint.com/rwd-scrollbars-is-chrome-better/

If a vertical scrollbar is present at a viewport width of 769px then the body width is (769px - scrollbarWidth) while the mui-container width is 768px which causes horizontal overflow.

There are a few solutions to the problem. One solution is to decrease the size of mui-container-sm (and increase the gutter-width to enable a smooth transition from medium to small). Another solution is to compensate for the scrollbar width in JavaScript.

I'd like to spend more time thinking about it so I have a better sense of advantages/disadvantages of each approach. Let me know if you have some thoughts on how to fix the problem!

@amorey
Copy link
Member

amorey commented Aug 4, 2015

@rockerBOO I subtracted 20px from $mui-container-sm to compensate for the width of the vertical scrollbar:
https://github.com/muicss/mui/blob/master/src/sass/mui/_variables.scss#L45

That prevents mui-container elements from causing the <body> to overflow but it also has the side effect of increasing their width from 748px to 767px (100%) as the viewport width transitions past the 768px breakpoint.

Bootstrap used the same solution so I think this might be the best way to solve the problem given the tradeoffs. It's fairly easy to calculate the scrollbar width in JavaScript and add a CSS rule to compensate for it but I'm hesitant to build this into MUI by default since it could cause screen jitter and it'd be better for the app to decide how/when it wants to modify the CSS.

The code is in master and will be part of the next release. Let me know if you have any thoughts.

@amorey
Copy link
Member

amorey commented Aug 5, 2015

@rockerBOO The scrollbar problem is fixed in v0.1.20 #39

@rockerBOO
Copy link
Author

Thanks amorey! I think this solution will be good. I have been really busy lately, but I will update to 0.1.21 soon and let you know. 😃

@amorey
Copy link
Member

amorey commented Aug 9, 2015

Sounds great! Let me know.

@rockerBOO
Copy link
Author

This seems resolved in my local version, will get it up soon. Will share when its up.

@amorey
Copy link
Member

amorey commented Aug 20, 2015

Great! Let me know!

@rockerBOO
Copy link
Author

Looks good. Here is it live now. http://discovery.rockerboo.net/

@amorey
Copy link
Member

amorey commented Aug 20, 2015 via email

@amorey amorey closed this as completed Sep 19, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug priority: high
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@rockerBOO @amorey