Estoy tratando de voltear varios elementos div en diferentes momentos en Reactjs alternando las clases asignadas a ellos.

Funciona como se esperaba en Opera, Firefox y Chrome, pero no en Safari. En Safari, cuando se voltea un solo elemento, todos los demás elementos volteados desaparecen. Sin embargo, los otros elementos no volteados no se ven afectados. Me pregunto si esto se puede arreglar en Safari para que se comporte como los otros navegadores.

Aquí hay un jsfiddle que funcionará en todos los navegadores excepto Safari.

Aquí está el jsx relevante. 'volteado' es un objeto con múltiples valores booleanos para realizar un seguimiento de qué elementos se voltean y cuáles no.

 <div className="item"> <div className={"bg-card" + (flipped[i] ? ' bg-card-flipped' : '')}> <div className="bg-image bg-image-front">Front {i}</div> <div className="bg-image bg-image-back">Back {i}</div> </div> </div>

Aquí está el css relevante:

 .item { position: relative; background-color: black; width: 100px; height: 100px; margin-right: 20px; } .bg-card { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transition: transform 0.5s ease; } .bg-card-flipped { transform: rotateY(180deg); } .bg-image { object-fit: cover; width: 100%; height: 100%; position: absolute; border-style: solid; font-size: 1.4em; color: white; font-weight: bold; } .bg-image-front { backface-visibility: hidden; background-color: rgb(117, 211, 255); } .bg-image-back { backface-visibility: hidden; transform: rotateY(180deg); background-color: rgb(85, 85, 85); }

¡Cualquier ayuda sería muy apreciada!