Left nav breaks in Safari

[bradumbaugh]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

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

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

Description

• Left nav disappears and/or freezes up on macOS Safari
• Doesn't happen in Chrome

Expected behaviour

Left nav works as normal.

Actual behaviour

Left nav sometimes disappears and/or freezes up.

Steps to reproduce

1. Create a site using the mkdocs.yml provided below
2. mkdocs serve
3. Use the site in Safari, clicking around in the left nav

See video, here:

mkdocs-material-safari-left-nav.mov

Package versions

• Python 3.8.2
• mkdocs, version 1.2.3
• Material: Version: 8.1.3+insiders.4.5.0

Configuration

# Project information
site_name: Animals

# Configuration
theme:
  name: material

nav:
  - Wildlife: wildlife.md
  - Animals:
    - Land:
      - Land Animals: animals/land/index.md
    - Sea:
      - Sea Animals: animals/sea/index.md

System information

• Operating system: macOS Monterey, Version 12.0.1
• Browser: Safari, Version 15.1

[squidfunk]

This is definitely a browser bug. Safari... the new IE.

[squidfunk]

I think I have a fix in 8233849. It's a hack to promote the navigation link title to its own layer, but that seems to mitigate the issue at hand. I could only test in Safari 14, so it would be great if you could check the latest master again 😊

[bradumbaugh]

Goodness you're fast. Thanks, @squidfunk. Will test and get back to you!

[bradumbaugh]

@squidfunk Actually, what's the best way to do this? Clone the insiders repository, and just update the doc structure in that clone to mirror the setup I listed in the issue description?

[bradumbaugh]

OK, I cloned the insiders repo, and I adjusted the mkdocs.yml to read as follows (turned off tabs, sections, and indexes; set up the same docs structure as in the original issue):

# Project information
site_name: Material for MkDocs
site_url: https://squidfunk.github.io/mkdocs-material/
site_author: Martin Donath
site_description: >-
  Create a branded static site from a set of Markdown files to host the
  documentation of your Open Source or commercial project

# Repository
repo_name: squidfunk/mkdocs-material
repo_url: https://github.com/squidfunk/mkdocs-material
edit_uri: ""

# Copyright
copyright: Copyright © 2016 - 2021 Martin Donath

# Configuration
theme:
  name: null
  custom_dir: !ENV [THEME_DIR, "material"]

  # Static files
  static_templates:
    - 404.html

  # Don't include MkDocs' JavaScript
  include_search_page: false
  search_index_only: true

  # Default values, taken from mkdocs_theme.yml
  language: en
  features:
    - announce.dismiss
    - content.code.annotate
    # - content.tabs.link
    # - header.autohide
    # - navigation.expand
    # - navigation.indexes
    # - navigation.instant
    # - navigation.sections
    # - navigation.tabs
    # - navigation.tabs.sticky
    - navigation.top
    - navigation.tracking
    - search.highlight
    - search.share
    - search.suggest
    # - toc.integrate
  palette:
    - scheme: default
      primary: indigo
      accent: indigo
      toggle:
        icon: material/toggle-switch
        name: Switch to dark mode
    - scheme: slate
      primary: red
      accent: red
      toggle:
        icon: material/toggle-switch-off-outline
        name: Switch to light mode
  font:
    text: Roboto
    code: Roboto Mono
  favicon: assets/favicon.png
  icon:
    logo: logo

# Plugins
plugins:
  - search:
      separator: "[\\s\\-,:!=\\[\\]()\"/]+|\\.(?!\\d)|&[lg]t;|(?!\\b)(?=[A-Z][a-z])"
  - social
  - redirects:
      redirect_maps:
        changelog/insiders.md: insiders/changelog.md
        reference/meta-tags.md: reference/index.md
        reference/variables.md: https://mkdocs-macros-plugin.readthedocs.io/
        sponsorship.md: insiders/index.md
        upgrading.md: upgrade.md
  - minify:
      minify_html: true

# Customization
extra:
  analytics:
    provider: google
    property: !ENV GOOGLE_ANALYTICS_KEY
    feedback:
      title: Was this page helpful?
      ratings:
        - icon: material/emoticon-happy-outline
          name: This page was helpful
          data: 1
          note: Thanks for your feedback!
        - icon: material/emoticon-sad-outline
          name: This page could be improved
          data: 0
          note: >-
            Thanks for your feedback! Help us improve this page by
            <a href="https://docs.google.com/forms/d/e/1FAIpQLSe8L5YDggZiVjgvBKfv-XCdbQAEJrseRh8MBh-jS92TU2aqzw/viewform?usp=pp_url&entry.853143515={url}" target=_blank>telling us what you're missing</a>.

  social:
    - icon: fontawesome/brands/github
      link: https://github.com/squidfunk
    - icon: fontawesome/brands/gitter
      link: https://gitter.im/squidfunk/mkdocs-material
    - icon: fontawesome/brands/docker
      link: https://hub.docker.com/r/squidfunk/mkdocs-material/
    - icon: fontawesome/brands/twitter
      link: https://twitter.com/squidfunk
    - icon: fontawesome/brands/linkedin
      link: https://linkedin.com/in/squidfunk/
    - icon: fontawesome/brands/instagram
      link: https://instagram.com/squidfunk

# Extensions
markdown_extensions:
  - admonition
  - abbr
  - attr_list
  - def_list
  - footnotes
  - meta
  - md_in_html
  - toc:
      permalink: true
  - pymdownx.arithmatex:
      generic: true
  - pymdownx.betterem:
      smart_enable: all
  - pymdownx.caret
  - pymdownx.details
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg
  - pymdownx.highlight:
      anchor_linenums: true
  - pymdownx.inlinehilite
  - pymdownx.keys
  - pymdownx.magiclink:
      repo_url_shorthand: true
      user: squidfunk
      repo: mkdocs-material
  - pymdownx.mark
  - pymdownx.smartsymbols
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format
  - pymdownx.tabbed:
      alternate_style: true
  - pymdownx.tasklist:
      custom_checkbox: true
  - pymdownx.tilde

# Page tree
nav:
  - Wildlife: wildlife.md
  - Animals:
    - Land:
      - Land Animals: animals/land/index.md
    - Sea:
      - Sea Animals: animals/sea/index.md

If I run mkdocs serve from this clone, it seems like the left nav is working, but I'm seeing a few other things going on now:

mkdocs-material.mov

1. There's a persistent scroll bar when all the nav menus are collapsed (I don't think this used to be the case?)
   • Safari (doesn't happen in Chrome)
2. The dark mode toggle isn't clickable
   • Chrome and Safari
3. I can't pull up the search
   • Chrome and Safari

Let me know if there's a better way to test, happy to try again if the way I'm doing it isn't valid. Also, if I should put these things in other issues, can do that, too.

[squidfunk]

That is weird and probably related to something else. You can install the latest version with:

pip install --upgrade git+https://${GH_TOKEN}@github.com/squidfunk/mkdocs-material-insiders.git

If that doesn't work, try:

pip install --force git+https://${GH_TOKEN}@github.com/squidfunk/mkdocs-material-insiders.git

[bradumbaugh]

Oh, OK. I thought that'd grab the latest release tag, not the latest on master. Will try that out. Thanks!

[squidfunk]

It's not yet released, as I wanted to check if it's fixed first. On a side note: there's no possibility to install "latest release" via pip when installing from git – you can only install specific tags or master 😕

[bradumbaugh]

Today I learned. :) Thanks! Let me try again with this approach and see how it goes.

[bradumbaugh]

@squidfunk OK, after I installed using the --force option, it seems to work. Also, the persistent scroll bar is gone, search seems to work, and the palette toggle works.

So, all good news. Thank you!

[squidfunk]

Awesome, thanks for checking!

[squidfunk]

Released as part of 8.1.4-insiders-4.5.1.

[squidfunk]

I adjusted the code that fixes the bug to fix a regression because of this fix in #3526 – could you check the latest Insiders if the issue re-appears (i.e. regresses)? My testing shows that the bug still does not re-appear, but better save than sorry.

[bradumbaugh]

Oh, definitely... thanks for the heads-up. Will give it a try and report back.

[bradumbaugh]

Just did a quick test, seems fine! Will let you know if I see it pop back up. Thanks, @squidfunk.

[squidfunk]

Perfect, thanks! New fix is even better as it doesn't push every navigation item on a new layer.