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.

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

Long sidebar overlaps with post content when unfolded #668

Closed
carlesfernandez opened this Issue Nov 21, 2016 · 9 comments

Comments

Projects
None yet
2 participants
@carlesfernandez

carlesfernandez commented Nov 21, 2016

  • This is a question about using the theme.
  • I believe this to be a bug with the theme --- not Jekyll, GitHub Pages or one of the bundled plugins.
  • This is a feature request.
  • I have updated all gems with bundle update.
  • I have tested locally with bundle exec jekyll build.

Environment informations

  • Minimal Mistakes version: 4.0.8
  • github-pages version: 104
  • Operating system: macOS Sierra

Expected behavior

A long sidebar overlaps with post content when the menu is unfolded, when using Chrome for Android. It looks good (i.e., the menu folds and unfolds correctly) in Chrome for desktop/laptops.

Steps to reproduce the behavior

Example:
Web: http://gnss-sdr.org/news/
Repo: https://github.com/gnss-sdr/geniuss-place
Using GitHub Pages

How it is rendered by Chrome for Android when menu is unfolded:

Screenshot from a Nexus 5

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Nov 21, 2016

Owner

Will have to see if I can reproduce it. Sure looks like this issue from before related to the "sticky" sidebar.

#396

Owner

mmistakes commented Nov 21, 2016

Will have to see if I can reproduce it. Sure looks like this issue from before related to the "sticky" sidebar.

#396

@carlesfernandez

This comment has been minimized.

Show comment
Hide comment
@carlesfernandez

carlesfernandez Nov 21, 2016

I've done some theme customization, so maybe I've messed up things at some point. Thanks for looking it up, and of course also for this awesome theme!

carlesfernandez commented Nov 21, 2016

I've done some theme customization, so maybe I've messed up things at some point. Thanks for looking it up, and of course also for this awesome theme!

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Nov 21, 2016

Owner

I think I know what the issue is. On screen sizes 1024 and up, position: sticky is being applied to the sidebar. I have the sidebar nav list showing up at 1023 so it's having the sticky position applied. Which is screwing up the layout.

Shouldn't take much CSS to fix it.

Owner

mmistakes commented Nov 21, 2016

I think I know what the issue is. On screen sizes 1024 and up, position: sticky is being applied to the sidebar. I have the sidebar nav list showing up at 1023 so it's having the sticky position applied. Which is screwing up the layout.

Shouldn't take much CSS to fix it.

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Nov 21, 2016

Owner

@carlesfernandez Just to be sure it's not due to a customization you did (I don't think it is 😄) can you verify if this page looks messed up too in Chrome for Android?

https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/

Owner

mmistakes commented Nov 21, 2016

@carlesfernandez Just to be sure it's not due to a customization you did (I don't think it is 😄) can you verify if this page looks messed up too in Chrome for Android?

https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/

@carlesfernandez

This comment has been minimized.

Show comment
Hide comment
@carlesfernandez

carlesfernandez Nov 21, 2016

Yes, this page suffers from the same problem:

Screenshot_20161121-212543.png

carlesfernandez commented Nov 21, 2016

Yes, this page suffers from the same problem:

Screenshot_20161121-212543.png

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Nov 21, 2016

Owner

OK. Thanks for checking. It's definitely not the sticky class. Looks like only part of the sidebar overlaps. Think it might have something to do with how Chrome on Android handles viewport units.

Might need to change 100vh to 100% in _navigation.scss

.nav__list input:checked ~ .nav__items {
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
-   max-height: 100vh;
+   max-height: 100%;
    overflow: visible;
    opacity: 1;
    margin-top: 1em;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}
Owner

mmistakes commented Nov 21, 2016

OK. Thanks for checking. It's definitely not the sticky class. Looks like only part of the sidebar overlaps. Think it might have something to do with how Chrome on Android handles viewport units.

Might need to change 100vh to 100% in _navigation.scss

.nav__list input:checked ~ .nav__items {
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
-   max-height: 100vh;
+   max-height: 100%;
    overflow: visible;
    opacity: 1;
    margin-top: 1em;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}
@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Nov 21, 2016

Owner

Seeing it in Firefox's responsive web tester. Changing max-height: 100vh to max-height: 100% appears to fix it. Can you confirm if it fixes it for Chrome for Android since I have no way of testing that?

firefox

Owner

mmistakes commented Nov 21, 2016

Seeing it in Firefox's responsive web tester. Changing max-height: 100vh to max-height: 100% appears to fix it. Can you confirm if it fixes it for Chrome for Android since I have no way of testing that?

firefox

@carlesfernandez

This comment has been minimized.

Show comment
Hide comment
@carlesfernandez

carlesfernandez Nov 21, 2016

You nailed it!

I confirm this change solves the issue in Chrome for Android. Thank you!

carlesfernandez commented Nov 21, 2016

You nailed it!

I confirm this change solves the issue in Chrome for Android. Thank you!

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Nov 21, 2016

Owner

Fantastic. Thanks for identifying and testing the bug.

Owner

mmistakes commented Nov 21, 2016

Fantastic. Thanks for identifying and testing the bug.

mmistakes added a commit that referenced this issue Nov 21, 2016

Fix overlapping sidebar navigation list due to `max-height: 100vh`
- Use `max-height: 9999px` for smoother animation than `max-height: 100%`
- Issue #668

TheCodedSelf pushed a commit to TheCodedSelf/thecodedself.github.io that referenced this issue Dec 7, 2016

Fix overlapping sidebar navigation list due to `max-height: 100vh`
- Use `max-height: 9999px` for smoother animation than `max-height: 100%`
- Issue mmistakes#668

jluccisano added a commit to jluccisano/jluccisano.github.io that referenced this issue May 6, 2017

Fix overlapping sidebar navigation list due to `max-height: 100vh`
- Use `max-height: 9999px` for smoother animation than `max-height: 100%`
- Issue mmistakes#668

antonizoon pushed a commit to antonizoon/antonizoon.github.io that referenced this issue Jul 27, 2018

Fix overlapping sidebar navigation list due to `max-height: 100vh`
- Use `max-height: 9999px` for smoother animation than `max-height: 100%`
- Issue mmistakes#668
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment