Topic: Flipping Card Not Working in Firefox

christopherbirwin pro asked 5 years ago

Expected behavior: Card rotated to the back side doesn't show content from the front side.

Actual behavior: Card rotated to the back side shows content from the front side, but in reverse.

Resources (screenshots, code snippets etc.)


So, when this snippet is viewed in Chrome and Edge, it works fine. But when it's viewed in the latest Firefox, it doesn't. When rotated from the front to the back side of the card, content from the front of the card is shown in reverse.

Sample code is in the snippet.

christopherbirwin pro answered 5 years ago

I mean, for anyone interested, I've found a workaround for Firefox:

  1. Add the h-100 class to the card div
  2. Add the h-100 class to each card-body div
  3. Make the background color of each card-body div white

Snippet is here:

Marta Wierzbicka staff commented 5 years ago

Hi, thanks for sharing your issue and the solution. Best, Marta

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.7.4
  • Device: Desktop PC
  • Browser: Firefox 66.0 (64-bit)
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes