Buggy header shadow

[PegasisForever]

• 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]

Thanks for reporting! Unfortunately, I cannot reproduce your issue (on Chrome, macOS). It's all working as intended for me.

• Header shadow is always visible when no tabs are used, e.g. here
• When an announcement bar is used, header shadow is visible when scrolling paste it
• When tabs are used, header shadow is visible when scrolling paste them

[PegasisForever]

Header shadow is always visible when no tabs are used, e.g. here

I found the code changing shadow state at src/assets/javascripts/components/header/_/index.ts, however I can't find any code checking whether tabs are used. Am I missing something?

btw, the shadow in the link you shared also behaves buggy on my computer.

[squidfunk]

Thanks for your response. Could you please specify what you mean by "buggy"? Even though the header shadow disappears in your video when the users scrolled to the top, I won't consider it being "buggy". Yes, the behavior might be slightly different depending on browser but everything seems to be behaving predictably.

[squidfunk]

Whether the header is shown is determined based on the Main area observable:

mkdocs-material/src/assets/javascripts/components/header/_/index.ts

Lines 186 to 198 in 414ffe1

	const internal$ = new Subject<Main>()
	internal$
	.pipe(
	distinctUntilKeyChanged("active"),
	combineLatestWith(header$),
	observeOn(animationFrameScheduler)
	)
	.subscribe(([{ active }, { hidden }]) => {
	if (active)
	setHeaderState(el, hidden ? "hidden" : "shadow")
	else
	resetHeaderState(el)
	})

When active is true, and the header is not hidden (only the case when the header.autohide feature flag is set) the header shadow is rendered, which is the case when the main area's top is scrolled past the header's bottom:

mkdocs-material/src/assets/javascripts/components/main/index.ts

Lines 105 to 124 in 414ffe1

	return combineLatest([adjust$, border$, viewport$])
	.pipe(
	map(([header, { top, bottom }, { offset: { y }, size: { height } }]) => {
	height = Math.max(0, height
	- Math.max(0, top - y, header)
	- Math.max(0, height + y - bottom)
	)
	return {
	offset: top - header,
	height,
	active: top - header <= y
	}
	}),
	distinctUntilChanged((a, b) => (
	a.offset === b.offset &&
	a.height === b.height &&
	a.active === b.active
	))
	)
	}

[PegasisForever]

By "buggy" I mean when the page is not scrolled, sometimes it shows the shadow sometimes it doesn't.

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

And on chrome android, it shows the shadow even if not scrolled.

[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.

[PegasisForever]

I found the issue. There're actually 2 bugs.

1. mkdocs-material/src/assets/javascripts/components/main/index.ts

   Line 96 in 414ffe1

   top: el.offsetTop,

   
   offsetTop always return an integer, however the height of the header may not be an integer, this results the calculated scroll position to be something like 0.5(this is fine) or -0.5(not fine!) when scrolled to top.

2. mkdocs-material/src/assets/javascripts/components/main/index.ts

   Line 115 in 414ffe1

   active: top - header <= y

   
   <= should be <

I'm working on a pr.

[squidfunk]

Fixed in f43ef69. I switched all computations to the rounded values, which should now always yield consistent results.

Really good catch!

[squidfunk]

Released as part of 7.0.7.