I'm having an issue with a flipping card that has a canvas in the front face of the card.
In Chrome is working all fine, the canvas drawing hides when the card is flipped.
The problem is in safari IOS where the canvas hides only after the flipping transition effect has finished.
Here is a sample code:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
.card-container {
display: grid;
}
input[type='checkbox'] {
display: none;
}
.card-flip {
display: grid;
grid-template: 1fr / 1fr;
grid-template-areas: "frontAndBack";
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: all 0.7s ease;
}
.card-flip div {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.front {
grid-area: frontAndBack;
}
.back {
grid-area: frontAndBack;
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
input[type='checkbox']:checked + .card-container .card-flip {
transform: rotateY(180deg);
}
<html lang="es"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<input type="checkbox" id="card-1"/>
<label class="col-md-4 card-container" for="card-1">
<div class="card-flip">
<div class="card front card-block">
<div class="card-body">
<p>front side<p>
<div>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>
</div>
</div>
</div>
<div class="card back card-block">
<div id="DB_card-body_back_0" class="card-body">
<p>Back side<p>
</div>
</div>
</div>
</label>
</div>
</div>
</body></html>
question from:
https://stackoverflow.com/questions/65942911/canvas-not-hidding-when-css-flip-card-in-ios 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
