为什么 CSS 在多次打开 Safari 后旋转会随机切换方向，我该如何防止这种情况发生？
[英]Why does CSS rotate randomly switches direction after multiple turns on Safari and how can I prevent this?
问题描述
I needed to create a card element that always flips in the same direction when clicked and the following snippet does exactly what I want but only when using Chrome and Firefox. When viewing the snippet on Safari both on iOS and MacOS, one encounters a weird issue where after approximately 20 clicks, the card flips randomly back and forth and becomes unpredictable as shown in the attached screen record.
我需要创建一个卡片元素，单击时它总是朝同一方向翻转，下面的代码片段完全符合我的要求，但仅当使用 Chrome 和 Firefox 时。在 iOS 和 MacOS 上查看 Safari 上的代码片段时，遇到一个奇怪的问题在大约 20 次点击后，卡片随机来回翻转，并且变得不可预测，如随附的屏幕记录所示。
Is this a known issue and is there anything to prevent this from happening?这是一个已知问题吗？有什么可以防止这种情况发生的吗？
let rot = 0; function flip() { rot++; const flipContent = document.getElementById("flip").querySelector(".flip-content"); flipContent.style.transform = `rotateX(${rot * 0.5}turn)`; flipContent.style.boxShadow = (rot % 2 === 0)? `20px 20px 10px 0 rgba(0,0,0,0.4)`: `20px -20px 10px 0 rgba(0,0,0,0.4)`; }
html, body { display: flex; margin: 0; height: 100%; width: 100%; }.flip-card { width: 70vmin; height: 70vmin; margin: auto; background: transparent; perspective: 1000px; transition: scale 0.3s; scale: 90%; cursor: pointer; }.flip-content { width: 100%; height: 100%; transform-style: preserve-3d; transition: all 0.6s ease-in-out; box-shadow: 20px 20px 10px 0 rgba(0,0,0,0.4); }.front-face, .back-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; }.front-face { background-color: blue; }.back-face { background-color: red; transform: rotateX(180deg); }.flip-card:hover { scale: 100%; }
<body> <div id="flip" class="flip-card" onclick="flip()"> <div class="flip-content"> <div class="front-face"></div> <div class="back-face"></div> </div> </div> </body>
在 MacOS 上 Safari 上制作的屏幕记录演示了该问题
1 个解决方案
解决方案1
-1 2022-12-12 22:54:41
Add the prefix vendor -webkit- for Safari in front of backface-visibility property:在backface-visibility属性前添加前缀 vendor -webkit- for Safari：
.front-face, .back-face { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.