Table display “flickers” when refreshing the page

[syxc]

Context

No response

Bug description

Table display “flickers” when refreshing the page.

Kapture.2024-05-28.at.21.16.45.mp4

Related links

• Reporting a bug

Reproduction

mkdocs-demo.zip

Steps to reproduce

refreshing page

Browser

Chrome, Safari, Edge, Firefox

Before submitting

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

[alexvoss]

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]

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]

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]

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.

[syxc]

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

[syxc]

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]

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:

mkdocs-material/src/templates/assets/javascripts/templates/table/index.tsx

Lines 29 to 44 in 2412a1b

	/**
	* Render a table inside a wrapper to improve scrolling on mobile
	*
	* @param table - Table element
	*
	* @returns Element
	*/
	export function renderTable(table: HTMLElement): HTMLElement {
	return (
	<div class="md-typeset__scrollwrap">
	<div class="md-typeset__table">
	{table}
	</div>
	</div>
	)
	}

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

[syxc]

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

Kapture.2024-05-29.at.19.58.09.mp4

[squidfunk]

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