Light and dark mode images do not appear consistent when used with md_in_html extension

[pushbroomsweep]

Context

I want to add light and dark mode images with a common caption so I'm trying to use the md_in_html extension as follows:

<figure markdown>
  ![test_image_light](images/mask_rcnn.jpg#only-light)
  ![test_image_dark](images/mask_rcnn.jpg#only-dark)
</figure>

Bug description

This seems to happen whenever using the md_in_html extension. It doesn't matter if <figcaption> is used. In dark mode, the content after the figure seems to be pushed down slightly lower compared to light mode.

When inspecting the html, the height of the <p> tag is a bit more in dark mode compared to light mode. I have also tried it with markdown="block", markdown="1" and markdown="span" and it doesn't seem to make a difference.

Related links

• Reporting a bug

Reproduction

image_bug.zip

Steps to reproduce

1. Add the md_in_html extension to mkdocs.yml
2. Create a <figure markdown> element and add the only-light and only-dark images one after another (order doesn't matter, it's always the dark mode content that appears differently)
3. Optionally, include the <figcaption> element
4. Add some content below this <figure> block
5. View the page

Browser

No response

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.

[squidfunk]

Thanks for reporting and the excellent reproduction! The problem was induced by a CSS override in the slate theme which set display: initial for #only-dark images in dark mode, setting them into inline display mode (the default). Setting initial might not be the best idea, but setting block might also interfere with author-provided CSS styles.

For this reason, I've refactored the way light and dark mode image modes are toggled in 986cada and moved the overrides under the data-md-color-scheme scope. This way, authors can define images with any display mode while retaining the show/hide functionality.

[squidfunk]

9.1.9 is out, including the changes referenced in this issue! 🚀