'CSS flip card flicker on Safari and broken scroll

I have a flip card that displays content on the front and back. Front content determines the height of the card. The card back should be the same height as the front. Scroll is needed if the height isn't sufficient.

A codepen example is here https://codepen.io/rumbletumble/pen/OJmJGBL

This card appears to function as expected on Chrome, Firefox and Edge.

However, on Safari the following issues occur (tested in Safari 14.1.1 (15611.2.7.1.6, 15611) and iPhone 12 Pro Max 14.4 simulator)

  1. The back unexpectedly becomes visible on the start of the transition

enter image description here

  1. The scrolled content on the back won't scroll (using mouse wheel). On a PC the scroller can be clicked & dragged, but on Mobile this won't work.

enter image description here

I've tried

  • -webkit-overflow-scrolling: touch;
  • Using various combinations of overflow-y: auto / scroll
  • Adding translateZ as suggested by this post. Flip Card Bug Safari
  • Made sure that all the -webkit- prefixes are in place

Any help appreciated.

csssafaricss-transitionscss-transforms


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions