Markdown code inside `details` tag not displayed in Firefox

[mdjohns]

• Playground Recreation
• Seemingly related issues/discussions:

  • 371

  • 340

  • 319

  • 279

Screenshot


Essentially a markdown code block that is initially hidden in some way will end up with invalid dimensions once it is un-hidden. In my example, it's the <details> element, but seems similar in the linked issues. The problem is resolved when the browser window is resized.

https://github.com/code-hike/codehike/blob/52738ced86f693184233d396d31d6e6e8d75345d/packages/mdx/src/smooth-code/use-dimensions.tsx#L245

I took a quick peek and the dimensions seem to be calculated in this hook, but I haven't looked deeper into why these calculations may be taking invalid values.

If anything jumps out to anyone, let me know. I may be able to find some time to look deeper at this.

[pomber]

Thanks for reporting and collecting all the links.

The workaround is to make sure that the component re-renders when the visibility change. In the details example that would be wrapping the code in a div, listening to the open event, and changing the key of the wrapper when the visibility changes.

I have an idea of how to fix it in Code Hike with a ResizeObserver, I'll give it a try today.