twisty-player Inconsistent Rendering Issue in Firefox 92.0

[dunkOnIT]

To Reproduce
Steps to reproduce the behavior:

1. Open Firefox 92.0
2. Navigate to https://dunkonit.github.io/cubing.js/getting-started/#html-cube-player ¹
3. All embedded twisty-players have the bottom of the player cut off. This persist across changes to the height/width of the element (see Image 1).

Expected behavior
I expect the buttons at the bottom of the player not to be cut off, as is the case in the cubing.js documentation and on Chrome (see Image 2).

Browser:

• OS: Windows 10
• Browser: Firefox 92.0
• Website built with Jekyll using the "minimal mistakes" theme

Comments:

Given that it functions normally on cubing.js/docs/cubing/index.html when opened in Firefox 92.0, I suspect this may be an issue with the CSS template that minimal-mistakes uses. However, Tomas has indicated that there are some known issues with Firefox - so I figured it would be better to post here and give @lgarron a chance to weigh in on troubleshooting strategy before I start taking shots in the dark.

Screenshots

Image 1

Image 2

Footnotes

1. Edit by @lgarron: The original URL went stale. Updated to the new URL. ↩

[lgarron]

Something funky is happening with the buttons, which have a space of 24px vertically and are set to height: 100% — but seem to be 33px high?!?!

I'll have to take a closer look later.