Markdown code inside details tag not displayed in Firefox

[mdjohns]

• Playground Recreation
• Seemingly related issues/discussions:
  • Code hike code block hides inside Tabs #371
  • CodeHike and Details tag #340
  • Issue when using codehike within a <Transition/> from headlessui #319
  • NaN set as width in docusaurus tabs #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.

codehike/packages/mdx/src/smooth-code/use-dimensions.tsx

Line 245 in 52738ce

const computedStyle = getComputedStyle(element)

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.