TIL, firefox:backface-visibility 이슈
카드 filp animation을 구현하기 위해
backface-visibility: hidden 적용이 필요하게 됬다.적용하여 크로미움 기반 브라우저나 사파리에서 확인했을때는 문제가 없었지만 파이어폭스에서 fillp 하여 뒷면을 보여줬을때 front 면이 했을때 정상 적용이 되지 않는 버그가 발생하는것을 확인하게 되었다.
해당 기능이 지원이 되지 않아 발생한 것인가 생각이 되어 caniuse 에서 확인해보니 딱히 지원이슈가 아닌것으로 확인이 되었다.
BugZilla 에서 해당 이슈를 확인해보니 무려 8년전에 오픈된 이슈???…로 아직 해결 되지 않은것으로 보인다…
제시된 해결 방법으로 다음과 같이
transform: rotateX(0deg); 을 적용하면 해결이 된다고 한다.샘플 코드: