Buggy header shadow

• I’ve read the contribution guidelines and agree with them

I’ve found a bug and checked that …

• … the problem doesn’t occur with the default MkDocs template
• … the problem is not in any of my customizations (CSS, JS, template)
• … the documentation does not mention anything about my problem
• … there are no open or closed issues that are related to my problem

Description

Header shadow randomly appears when it shouldn’t. This affects almost every site using mkdocs-material, e.g. https://notes.pegas.is/, https://walkccc.me/LeetCode/ This affects both Chrome and Firefox. However, the official documentation site doesn’t seem to be affected. (probably due to it’s announcement bar?)

Expected behavior

Header shadow only appears when the page is scrolled down.

Actual behavior

Video: https://cloud.pegasis.site/s/Q5H7LFWoKtWJHcd

Steps to reproduce the bug

It’s so random that I can’t give exact steps, try repeating those steps multiple times in different orders:

• resize window
• scroll page
• refresh

Package versions

• Python: 3.9.2
• MkDocs: 1.1.2
• Material: 7.0.6

Project configuration

site_name: Pega's Notes
docs_dir: public
site_dir: build
theme:
  name: material
  custom_dir: .overrides
  font:
    text: Fira Sans
    code: JetBrains Mono
  palette:
    primary: teal
    accent: teal
  logo: pega_logo_filled.svg
  favicon: favicon.png
  features:
    - navigation.instant
    - toc.integrate
    - search.suggest
plugins:
  - awesome-pages
  - section-index
  - search:
      lang:
        - en
  - git-revision-date-localized:
      enable_creation_date: true
      timezone: Amarica/Toronto
      locale: en
markdown_extensions:
  - pymdownx.snippets:
      check_paths: true
  - pymdownx.superfences
  - pymdownx.magiclink
  - pymdownx.tilde
  - pymdownx.caret
  - pymdownx.emoji
  - pymdownx.mark
  - pymdownx.smartsymbols
  - toc:
      permalink: true
extra:
  homepage: https://pegas.is/
  disqus: pega-notes
  social:
    - icon: fontawesome/brands/github
      link: https://github.com/PegasisForever
    - icon: fontawesome/brands/instagram
      link: https://www.instagram.com/__pegasis/
extra_css:
  - extra.css
extra_javascript:
  - extra.js
site_url: https://blog.pegas.is/
copyright: Copyright © 2021 Pegasis

System information

• OS: ArchLinux

• Browser: Google Chrome 89.0.4389.90 & Mozilla Firefox 87.0

[squidfunk]

Okay, thanks for the explanation and the video, I can now reproduce it on the example versioning docs. I’d regard this as an edge case and a very minor bug, but I’ll look into it when I find some time.

[squidfunk]

Released as part of 7.0.7.