I've been playing around with some different formats for using details / summary, and I've been trying to get a flip card to work. I've made it most of the way in Chrome, using only CSS (no JS), where the only issue is that as the card flips back to the front the text disappears slightly early which makes sense to me as the element closes immediately on click.
What doesn't make sense is that Safari appears to be refusing to run transitions some of the elements within the details element. I've included a snippet below. It works in other browsers and I created a version with the same structure and style but just using divs and that also works. I can use a CSS animation to get it to work when turning the card to the back, but when turning the card to the front (ie removing the animation styles) it just snaps to its initial position without transition so that's not really a workaround. Also, when I use inspector and adjust the elements that should be transitioning, it works fine -- but when opening / closing the details element it still just snaps instead.
Is there any way to solve this issue that anyone is aware of? Thanks for your help!
body {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #fefefe;
perspective: 1000px;
margin: 0;
font-size: 1.25rem;
line-height: 1.875rem;
}
html * {
box-sizing: border-box;
}
details {
width: 300px;
height: 400px;
transform-style: preserve-3d;
position: relative;
cursor: pointer;
}
.front,
.back,
summary:before {
position: absolute;
width: 100%;
height: 100%;
left: 0;
padding: 1rem;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
/* transform-style: preserve-3d; */
transition: all .75s cubic-bezier(0.52, 0.02, 0.28, 1);
-webkit-transition: all .75s cubic-bezier(0.52, 0.02, 0.28, 1);
}
.front,
summary:before {
background: white;
border-radius: 9px;
border: 3px solid orange;
box-shadow: 0 0 32px -8px rgba(0, 0, 0, 0.33);
}
summary {
list-style: none;
position: absolute;
width: 100%;
height: 100%;
left: 0;
transform-style: preserve-3d;
}
summary:before {
border-color: blue;
content: '';
box-sizing: border-box;
background: none;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transition: all .75s cubic-bezier(0.52, 0.02, 0.28, 1);
-webkit-transition: all .75s cubic-bezier(0.52, 0.02, 0.28, 1);
}
.front {
background-color: orange;
color: white;
}
summary::-webkit-details-marker,
summary::marker {
display: none;
}
.back {
overflow-y: scroll;
pointer-events: none;
transform: rotateY(180deg);
/* transform-style: preserve-3d; */
}
.back p {
margin: 0;
}
details[open] .front {
transform: rotateY(180deg);
}
details[open] .back {
/* transform: rotateY(360deg);
-webkit-transform: rotateY(360deg); */
animation: back .75s cubic-bezier(0.52, 0.02, 0.28, 1) forwards;
-webkit-animation: back .75s cubic-bezier(0.52, 0.02, 0.28, 1) forwards;
}
details[open] summary:before {
transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
transition: all .75s cubic-bezier(0.52, 0.02, 0.28, 1);
-webkit-transition: all .75s cubic-bezier(0.52, 0.02, 0.28, 1);
/* animation: back .75s cubic-bezier(0.52, 0.02, 0.28, 1) forwards;
-webkit-animation: back .75s cubic-bezier(0.52, 0.02, 0.28, 1) forwards; */
}
@keyframes back {
from {
transform: rotateY(180deg);
}
to {
transform: rotateY(360deg);
}
}<html>
<body>
<details>
<summary>
<div class="front">Front of Card</div>
</summary>
<div class="back">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.</p>
</div>
</details>
</body>
</html>
