css - Safari CSS 问题(Z-index?变换?)
问题描述
我已经为此苦苦挣扎了一周左右,但感觉离修复它还很近。所以我是第一次来Stack Overflow,你好!
我构建了一个漂亮的小卡片金额选择器,允许用户以视觉方式选择卡片。如果您想看到它的实际效果,请查看我的 CodePen!
它在 Chrome 中运行良好,但是当我在 Safari 中打开它时,阴影和 z-index 的动画似乎需要一点时间才能赶上。
我尝试将以下内容添加到 CSS 中,但无济于事。
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
我会很感激任何人的帮助!
反应JS
const { useState } = React;
function CardAmount(props) {
const cardAmounts = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const [cardAmount, setCardAmount] = useState(1);
function cardClick(e) {
const amount = Number.parseInt(e.target.id) + 1;
if (amount !== cardAmount) {
setCardAmount(amount);
}
}
function cardvCards(num) {
if (num === 0) {
return <p>card</p>;
} else {
return <p>cards</p>;
}
}
function animateCard(cardNumber) {
if (cardNumber < cardAmount) {
return "FrontFacing";
} else {
return "BackFacing";
}
}
//makeCards
function makeCards() {
return cardAmounts.map((d, i) => {
return (
<div className={animateCard(i)} key={"card_" + i}>
<div className="cardFront" id={i} onMouseEnter={cardClick}>
<div className="borderbox">
<h1>{d}</h1>
{cardvCards(i)}
</div>
</div>
<div className="cardBack" id={i} onMouseEnter={cardClick}></div>
</div>
);
});
}
return (
<div className="CardChoice">
<div className="cardAmountDisplay">{makeCards()}</div>
</div>
);
}
ReactDOM.render(<CardAmount />, document.getElementById("app"));
CSS
#app {
background-color: rgb(85, 26, 122);
width: 100vw;
height: 100vh;
}
h1 {
text-align: center;
}
p {
text-align: center;
}
.CardChoice {
display: flex;
align-items: center;
justify-content: center;
height: 180px;
}
.cardAmountDisplay {
display: flex;
position: relative;
}
.FrontFacing,
.BackFacing {
position: absolute;
background-color: white;
border: 1px solid #d4af37;
border-radius: 10px;
margin: 5px;
height: 165px;
width: 115px;
transition: 750ms;
-webkit-transition: 750ms;
-moz-transition: 750ms;
-o-transition: 750ms;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
box-shadow: -8px 2px 8px rgba(0, 0, 0, 0.5);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
.BackFacing {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
}
.cardFront,
.cardBack {
position: absolute;
width: 100%;
height: 100%;
border-radius: 10px;
background-color: white;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
.cardFront {
display: flex;
justify-content: center;
align-items: center;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
}
.borderbox {
background-color: white;
width: 95%;
height: 95%;
border: 1px solid #d4af37;
border-radius: 10px;
margin-left: 1px;
pointer-events: none;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
.cardFront h1 {
font-size: 80px;
color: #d4af37;
text-shadow: 1px 0px rgb(0, 0, 0), -1px 0px rgb(0, 0, 0), 0px 1px rgb(0, 0, 0),
0px -1px rgb(0, 0, 0);
margin-top: 15px;
margin-bottom: 0px;
pointer-events: none;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
.cardFront p {
font-size: 16px;
font-weight: 600;
color: #d4af37;
text-transform: uppercase;
pointer-events: none;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
.cardBack {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
}
.FrontFacing:nth-child(1) {
margin-left: -280px;
z-index: 1;
}
.FrontFacing:nth-child(2) {
margin-left: -240px;
z-index: 2;
}
.FrontFacing:nth-child(3) {
margin-left: -200px;
z-index: 3;
}
.FrontFacing:nth-child(4) {
margin-left: -160px;
z-index: 4;
}
.FrontFacing:nth-child(5) {
margin-left: -120px;
z-index: 5;
}
.FrontFacing:nth-child(6) {
margin-left: -80px;
z-index: 6;
}
.FrontFacing:nth-child(7) {
margin-left: -40px;
z-index: 7;
}
.FrontFacing:nth-child(8) {
margin-left: 0px;
z-index: 8;
}
.FrontFacing:nth-child(9) {
margin-left: 40px;
z-index: 9;
}
.FrontFacing:nth-child(10) {
margin-left: 80px;
z-index: 10;
}
.BackFacing:nth-child(2) {
margin-left: -140px;
z-index: 9;
}
.BackFacing:nth-child(3) {
margin-left: -100px;
z-index: 8;
}
.BackFacing:nth-child(4) {
margin-left: -60px;
z-index: 7;
}
.BackFacing:nth-child(5) {
margin-left: -20px;
z-index: 6;
}
.BackFacing:nth-child(6) {
margin-left: 20px;
z-index: 5;
}
.BackFacing:nth-child(7) {
margin-left: 60px;
z-index: 4;
}
.BackFacing:nth-child(8) {
margin-left: 100px;
z-index: 3;
}
.BackFacing:nth-child(9) {
margin-left: 140px;
z-index: 2;
}
.BackFacing:nth-child(10) {
margin-left: 180px;
z-index: 1;
}
解决方案
推荐阅读
- elasticsearch - Elasticsearch 中的管道聚合
- apache-spark - 使用 Apache Storm 配置 elasticsearch APM
- python - 按月计算数据框的累计值
- node.js - createReadStream() 使用内存文件 (Multer memoryStorage)
- ios - iOS 中的深层链接重定向错误 - “Safari 无法打开页面”
- html - 最小化页面时如何修复css中的菜单栏和容器
- node.js - 如何使用 HTTPS 上传 (REST) 上传 XML 文件
- ibm-watson - 扬声器标签不一致??即使只有 2 个扬声器
- ios - swift中字符0周围的无效值
- amazon-rds - AWS RDS 似乎一次只处理 3 个请求