Topic: Flipping Card Not Working in Firefox
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.)
Snippet:
https://mdbootstrap.com/snippets/jquery/christopherbirwin/492424
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.
I mean, for anyone interested, I've found a workaround for Firefox:
- Add the h-100 class to the card div
- Add the h-100 class to each card-body div
- Make the background color of each card-body div white
Snippet is here:
https://mdbootstrap.com/snippets/jquery/christopherbirwin/492688
Marta Szymanska staff pro premium commented 6 years ago
Hi, thanks for sharing your issue and the solution. Best, Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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