Horizontal scrollbar on mobile after hiding header when using header.autohide (Linux only)

vedranmiletic commented 3 years ago

Contribution guidelines

[X] I've read the contribution guidelines and wholeheartedly agree

I've found a bug and checked that ...

[X] ... the problem doesn't occur with the mkdocs or readthedocs themes
[X] ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
[X] ... the documentation does not mention anything about my problem
[X] ... there are no open or closed issues that are related to my problem

Description

I have enabled header.autohide under features. Header gets hidden as expected, but horizontal scrollbar appears after that.

Expected behaviour

Horizontal scrollbar should not appear.

Actual behaviour

Horizontal scrollbar appears.

Steps to reproduce

Enable header.autohide under features.
Open a long page.
Scroll.

Package versions

Python: 3.9.2
MkDocs: 1.2.2
Material: 7.2.4

Configuration

site_name: Group for apps and services on exascale research infrastructure
site_url: https://group.miletic.net/
theme:
  name: material
  features:
    - header.autohide

System information

Operating system: Android
Browser: Latest Firefox and Chrome

I have successfully reproduced it on Chromium 90.0.4430.212 and Brave 1.28.105 on Linux using latest MkDocs version and minimal config posted above. It doesn't seem to happen in Debian's Firefox 78.13 ESR.

I'm attaching a recording made in Brave responsive view of the bug appearing on the public version of the docs. The public version is compiled using 7.2.3, but the bug happens in 7.2.4 as mentioned above.

squidfunk commented 3 years ago

Thanks for reporting. I'm seeing the behavior in your screen capture but I'm not able to reproduce it in Chrome, Safari or Firefox on macOS. I currently don't have Linux or Windows at my disposal. It's weird that this is happening because the only thing that is applied to the header when it hides is the following:

.md-header[data-md-state=hidden] {
    transform: translateY(-100%);
    transition: transform .25s cubic-bezier(.8,0,.6,1), box-shadow .25s;
}

vedranmiletic commented 3 years ago

Using mobile view is essential. Alternatively, can you check on your mobile phone?

squidfunk commented 3 years ago

I just checked it on my iPhone, and it's working as expected. No scrollbars. Also, I've checked all browsers in mobile view before writing my last comment. Could you take a shot a debugging this, i.e. which element causes this + PR a fix? It should probably be trivial to fix.

squidfunk commented 3 years ago

Did you manage to isolate the issue or even attempt a fix?

tuanpht commented 3 years ago

I had also faced this issue, you can check this video I tested with Firefox Responsive Mode on Ubuntu

https://user-images.githubusercontent.com/21072956/129744708-d24642eb-3f58-4ca8-bca6-7176e734ffea.mp4

I fixed by adding this custom css:

.md-header[data-md-state="hidden"] {
  overflow: hidden;
}

squidfunk commented 3 years ago

Thanks for providing a potential fix! I'd be curious to learn which element is causing the header to overflow. Could you investigate this? It would be better to solve the root cause, because setting overflow: hidden might have unintended consequences.

squidfunk commented 3 years ago

Could you try to delete the .md-search element and see whether the error persists without your fix? I suspect this element to be the cause.

tuanpht commented 3 years ago

It would be better to solve the root cause, because setting overflow: hidden might have unintended consequences.

Sorry, I haven't found the root cause yet. This also cause Back to Top button jumping out of main area

https://user-images.githubusercontent.com/21072956/129748794-a713f310-d474-4e29-929f-8553c0118894.mp4

tuanpht commented 3 years ago

Could you try to delete the .md-search element and see whether the error persists without your fix? I suspect this element to be the cause.

@squidfunk I've tried this and it works

https://user-images.githubusercontent.com/21072956/129750280-a61557d6-5791-402f-b098-68819b99ad1e.mp4

squidfunk commented 3 years ago

Perfect, so that's the cause! It's strange that this only happens on Linux and only when the header is moved out of sight. The least invasive potential fix I can think of (without being able to test) is:

.md-header[data-md-state="hidden"] .md-search {
  overflow: hidden;
}

The idea is to only clip the search element, not the entire header. Some users might add stuff to the header which would suddenly be clipped before moved out of sight. Also, when the search is open, the header is always visible, so both states (header hidden, search visible) are disjoint.

Could you try and apply that? If it works, I can add it to master.

tuanpht commented 3 years ago

Sorry, I tried but it doesn't work.

I found the cause is .md-search__inner, the following css works, I had to add width: 0.

.md-header[data-md-state="hidden"] .md-search__inner {
   overflow: hidden;
   width: 0;
}

But it is not perfect, horizontal scrollbar still appear a moment when I scroll down and then scroll up... This is not good when you scroll up fast on mobile.

https://user-images.githubusercontent.com/21072956/129758612-30f343ef-04a4-4016-af1a-90649e899553.mp4

Let's investigate more.

squidfunk commented 3 years ago

But it is not perfect, horizontal scrollbar still appear a moment when I scroll down and then scroll up... This is not good when you scroll up fast on mobile.

And the same happens with the following snippet you posted earlier, correct?

.md-header[data-md-state="hidden"] {
  overflow: hidden;
}

squidfunk commented 3 years ago

So the problem appears to be .md-search__inner. It's positioned with fixed and with left: 100%, as it is animated to move from the left into the screen when the search is triggered on mobile. My guess is that if you add the following CSS, the problem should vanish:

.md-search__inner {
  left: 0;
  transform: none;
}

However, this introduces other problems. Essentially, we must only trigger this rule for the entire time the header is hidden (+ start and end animation). I haven't managed to find a way to do this reliably, yet. Any help with somebody who can debug this is appreciated.

ErliSoares commented 3 years ago

I have the same problem, it happens on Windows OS with Chrome and Chrome on android.

mkdocs.yml

site_name: Demo Error

copyright: Copyright &copy; Example

theme:
  name: material
  features:
    - header.autohide

docs/index.md

---
title: Page Error
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus consectetur turpis.

## Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus consectetur turpis, id ultrices enim lacinia id. Pellentesque lacinia blandit condimentum. Donec at elementum est. Duis commodo sit amet lorem a pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Morbi semper lectus leo, vel vulputate mi ultricies nec. Suspendisse potenti. Phasellus congue enim sed lectus faucibus, ac mattis ipsum efficitur. Donec sem erat, semper nec elit quis, convallis mattis nunc. Donec pharetra nunc non nisi rutrum mattis. Ut vitae urna arcu. Aliquam elit sapien, fringilla vitae ante id, condimentum gravida risus. Praesent efficitur lobortis massa condimentum suscipit.

Vivamus lacinia magna non varius consequat. Nullam scelerisque mi et augue imperdiet, sit amet vulputate arcu iaculis. Nam eu nisl a arcu sollicitudin vehicula.

Suspendisse vel pretium mi. Vivamus in feugiat arcu, eu lobortis quam. Aliquam at nisi pellentesque, efficitur elit lobortis, egestas neque.

Suspendisse quis metus purus. Nullam commodo condimentum dolor, a blandit orci. Aenean aliquet eget libero at dignissim. Maecenas ultrices aliquam sem, vitae eleifend velit molestie sit amet. Vivamus rhoncus velit eget turpis vulputate feugiat.

ErliSoares commented 3 years ago

If you place any image in html with header.autohide enabled, the page width gets bigger.

https://user-images.githubusercontent.com/2334509/132266024-97220c0a-7500-465c-ab78-bf37d93b3424.mp4

---
title: Page Error
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus consectetur turpis.

## Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus consectetur turpis, id ultrices enim lacinia id. Pellentesque lacinia blandit condimentum. Donec at elementum est. Duis commodo sit amet lorem a pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Morbi semper lectus leo, vel vulputate mi ultricies nec. Suspendisse potenti. Phasellus congue enim sed lectus faucibus, ac mattis ipsum efficitur. Donec sem erat, semper nec elit quis, convallis mattis nunc. Donec pharetra nunc non nisi rutrum mattis. Ut vitae urna arcu. Aliquam elit sapien, fringilla vitae ante id, condimentum gravida risus. Praesent efficitur lobortis massa condimentum suscipit.

Vivamus lacinia magna non varius consequat. Nullam scelerisque mi et augue imperdiet, sit amet vulputate arcu iaculis. Nam eu nisl a arcu sollicitudin vehicula.

Suspendisse vel pretium mi. Vivamus in feugiat arcu, eu lobortis quam. Aliquam at nisi pellentesque, efficitur elit lobortis, egestas neque.

Suspendisse quis metus purus. Nullam commodo condimentum dolor, a blandit orci. Aenean aliquet eget libero at dignissim. Maecenas ultrices aliquam sem, vitae eleifend velit molestie sit amet. Vivamus rhoncus velit eget turpis vulputate feugiat.

<img src="any_image">

Morbi semper lectus leo, vel vulputate mi ultricies nec. Suspendisse potenti. Phasellus congue enim sed lectus faucibus, ac mattis ipsum efficitur. Donec sem erat, semper nec elit quis, convallis mattis nunc. Donec pharetra nunc non nisi rutrum mattis. Ut vitae urna arcu. Aliquam elit sapien, fringilla vitae ante id, condimentum gravida risus. Praesent efficitur lobortis massa condimentum suscipit.

Morbi semper lectus leo, vel vulputate mi ultricies nec. Suspendisse potenti. Phasellus congue enim sed lectus faucibus, ac mattis ipsum efficitur. Donec sem erat, semper nec elit quis, convallis mattis nunc. Donec pharetra nunc non nisi rutrum mattis. Ut vitae urna arcu. Aliquam elit sapien, fringilla vitae ante id, condimentum gravida risus. Praesent efficitur lobortis massa condimentum suscipit.

squidfunk commented 3 years ago

Possible fix in d678678cc. I think I've fixed the issue for when the header is hidden. There may still be some edge cases, but the scrollbar shouldn't be visible anymore. I hope this does not introduce other issues. In case it does, we'll revert the fix again.

squidfunk commented 3 years ago

Released as part of 7.2.7.

tuanpht commented 3 years ago

Thank you :)

I confirmed it works on my phone Chrome for Android

vedranmiletic commented 3 years ago

Works for me as well, tested extensively yesterday on group.miletic.net using mobile Firefox and mobile Chrome, both on Android. Thanks!

squidfunk commented 3 years ago

Perfect, glad we could sort it out!

squidfunk / mkdocs-material