Table display “flickers” when refreshing the page

syxc commented 4 months ago

Context

No response

Bug description

Table display “flickers” when refreshing the page.

https://github.com/squidfunk/mkdocs-material/assets/315633/3e572985-f3e9-4ddd-bb5b-42565d4c7a09

Reproduction

mkdocs-demo.zip

Steps to reproduce

refreshing page

Browser

Chrome, Safari, Edge, Firefox

Before submitting

[X] I have read and followed the bug reporting guidelines.
[X] I have attached links to the documentation, and possibly related issues and discussions.
[X] I assure that I have removed all customizations before submitting this bug report.
[X] I have attached a .zip file with a minimal reproduction using the built-in info plugin.

alexvoss commented 4 months ago

Thanks for reporting. You could help us figure out what is going on by removing things from your projects that are not needed to reproduce the effect. The minimal reproduction page suggests starting from the other end by producing a new project and then adding things in until the effect is observed.

syxc commented 4 months ago

Thanks for reporting. You could help us figure out what is going on by removing things from your projects that are not needed to reproduce the effect. The minimal reproduction page suggests starting from the other end by producing a new project and then adding things in until the effect is observed.

@alexvoss

Hi, Clean demo updated.

mkdocs-demo-modified.zip

alexvoss commented 4 months ago

I don't observe the flickering in Firefox but I can see it in Chrome and Safari. It also seems to be worse when the Developer Tools are open. Not entirely sure this is caused by Material?

Btw,. please follow the instructions for the minimal reproduction as the info plugin also records the version number of Material used and runs various checks.

syxc commented 4 months ago

I don't observe the flickering in Firefox but I can see it in Chrome and Safari. It also seems to be worse when the Developer Tools are open. Not entirely sure this is caused by Material?

Btw,. please follow the instructions for the minimal reproduction as the info plugin also records the version number of Material used and runs various checks.

@alexvoss

Sorry, Firefox I didn't test it carefully, I just confirmed it and it does look fine on Firefox. The demo I've updated is actually quite clean, just these few files, the dependencies are only the latest version of mkdocs-material, mkdocs.yml only adds the most basic configuration, and runtime.txt can be ignored.

Looking forward to your fixed version.

1716909665157

syxc commented 4 months ago

Retried it, and this problem I fed back exists on Chrome, Safari.

syxc commented 4 months ago

Sorry, just confirmed, this issue doesn't seem to be a problem with mkdocs-material, I found that the tables extension for mkdocs also has the problem I reported.

squidfunk commented 4 months ago

Thanks for reporting. The slight repositioning comes from the fixes that Material for MkDocs has to apply in the browser to make tables properly scrollable, which is implemented in JavaScript. If you turn JavaScript off in your browser, you can see that the jittering stops. It could be fixed, if and only if the tables extension would create the necessary markup from the start.

Providing a wrapper element should be easy to implement in the tables extension – I recommend raising this as a potential feature request to Python Markdown, in order to allow for improving mobile user experience:

<div class="table">
  <div class="table-wrapper">
    ...
  </div>
</div>

The extension could hide it behind a feature flag, so it's downward compatible:

markdown_extensions:
  - tables:
      use_wrapper: true

This is what Material for MkDocs currently needs to do:

https://github.com/squidfunk/mkdocs-material/blob/2412a1b7bc0713730ec3d134b26fe503d9421c41/src/templates/assets/javascripts/templates/table/index.tsx#L29-L44

Without this fix, large tables would break the layout on mobile and overflow.

syxc commented 4 months ago

I retried it and found something, I recorded a video that you can watch, hopefully it will help with the mkdocs-material improvements.

mkdocs-demo-20240529.zip

https://github.com/squidfunk/mkdocs-material/assets/315633/8bf91bc6-036c-4af8-9bd3-ad07865c8e81

squidfunk commented 4 months ago

Thanks for sharing! We'll check it out ☺️

squidfunk / mkdocs-material