在 Apple 设备中悬停时出现 CSS 故障
链接视频：https://youtu.be/Uj7L98dpI4w
正如您在视频中看到的，在悬停事件中打开卡片时，我的 css 出现故障。此问题仅在 Apple 设备上发生，在 Windows 或 Android（还有 Safari、Chrome 或其他浏览器）上运行良好。我对这个问题一无所知。谢谢，请帮忙。源代码：
.card-section {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}
/* A container to hold the flip card and the inside page */
.card-instruction {
background-color: rgba(0, 0, 0, .05);
box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0, 0, 0, 0.5);
height: 15rem;
position: relative;
transition: all 1s ease;
-webkit-transition: all 1s ease;
width: 15rem;
text-align: center;
margin-bottom: 36px;
}
@media (max-width: 768px) {
.card-section {
transform: scale(0.9);
-webkit-transform: scale(0.9);
}
.card-instruction {
margin-bottom: 16px;
}
}
/* Flip card - covering both the front and inside front page */
/* An outer container to hold the flip card. This excludes the inside page */
.flip-card {
height: 15rem;
perspective: 100rem;
position: absolute;
right: 0;
-webkit-transition: all 1s ease;
transition: all 1s ease;
visibility: hidden;
width: 15rem;
z-index: 100;
}
/* The outer container's visibility is set to hidden. This is to make everything within the container NOT set to hidden */
/* This is done so content in the inside page can be selected */
.flip-card>* {
visibility: visible;
}
/* An inner container to hold the flip card. This excludes the inside page */
.flip-card__container {
height: 100%;
position: absolute;
right: 0;
-webkit-transform-origin: left;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1s ease;
transform-origin: left;
transform-style: preserve-3d;
transition: all 1s ease;
width: 100%;
}
.card-front,
.card-back {
backface-visibility: hidden;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
/* Styling for the front side of the flip card */
/* container for the front side */
.card-front {
background-color: #fafbfa;
height: 15rem;
width: 15rem;
}
/* Front side's top section */
.card-front__tp {
align-items: center;
clip-path: polygon(0 0, 100% 0, 100% 90%, 57% 90%, 50% 100%, 43% 90%, 0 90%);
display: flex;
flex-direction: column;
height: 12rem;
justify-content: center;
padding: .75rem;
}
.card-front__tp--city {
background: linear-gradient( to bottom, #00c735, #008724);
}
.card-front__tp--ski {
background: linear-gradient( to bottom, #d8db00, #999c03);
}
.card-front__tp--beach {
background: linear-gradient( to bottom, #053bff, #021b75);
}
.card-front__tp--camping {
background: linear-gradient( to bottom, #ff3300, #801900);
}
/* Front card's bottom section */
.card-front__bt {
align-items: center;
display: flex;
justify-content: center;
}
/* Styling for the back side of the flip card */
.card-back {
background-color: #fafbfa;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* Specifically targeting the <video> element */
.card-back img {
height: 100%;
min-height: 100%;
object-fit: cover;
width: 100%;
}
/* Inside page */
.inside-page {
background-color: #f5ffff;
box-shadow: inset 20rem 0px 5rem -2.5rem rgba(0, 0, 0, 0.25);
height: 100%;
padding: 1rem;
position: absolute;
right: 0;
transition: all 1s ease;
-webkit-transition: all 1s ease;
width: 15rem;
z-index: 1;
}
.inside-page__container {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
text-align: center;
width: 100%;
}
/* Functionality ====================================*/
/* This is to keep the card centered (within its container) when opened */
.card-instruction:hover {
box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0, 0, 0, 0.75);
width: 30rem;
}
/* When the card is hovered, the flip card container will rotate */
.card-instruction:hover .flip-card__container {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
/* When the card is hovered, the shadow on the inside page will shrink to the left */
.card:hover .inside-page {
box-shadow: inset 1rem 0px 5rem -2.5rem rgba(0, 0, 0, 0.1);
}<section class="card-section">
<div class="card-instruction">
<div class="flip-card">
<div class="flip-card__container">
<div class="card-front">
<div class="card-front__tp card-front__tp--city">
<i class="fas fa-clipboard-check fa-4x"></i>
<h2 class="card-front__heading">
Title
</h2>
<p class="card-front__text-price">
Subtitle
</p>
</div>
<div class="card-front__bt">
<p class="card-front__text-view card-front__text-view--city">
more
</p>
</div>
</div>
<div class="card-back">
<img class="" src="https://www.w3schools.com/css/img_5terre.jpg" />
</div>
</div>
</div>
<div class="inside-page">
<div class="inside-page__container">
<p class="inside-page__text">
Some text
</p>
</div>
</div>
</div>
</section>
</section>1 个答案:
答案 0 :(得分：2)
实际上，您需要添加一些供应商前缀以使 CSS 兼容其他浏览器。
.card-section {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
}
/* A container to hold the flip card and the inside page */
.card-instruction {
background-color: rgba(0, 0, 0, .05);
-webkit-box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0, 0, 0, 0.5);
box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0, 0, 0, 0.5);
height: 15rem;
position: relative;
-o-transition: all 1s ease;
transition: all 1s ease;
-webkit-transition: all 1s ease;
width: 15rem;
text-align: center;
margin-bottom: 36px;
}
@media (max-width: 768px) {
.card-section {
-ms-transform: scale(0.9);
transform: scale(0.9);
-webkit-transform: scale(0.9);
}
.card-instruction {
margin-bottom: 16px;
}
}
/* Flip card - covering both the front and inside front page */
/* An outer container to hold the flip card. This excludes the inside page */
.flip-card {
height: 15rem;
-webkit-perspective: 100rem;
perspective: 100rem;
position: absolute;
right: 0;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
visibility: hidden;
width: 15rem;
z-index: 100;
}
/* The outer container's visibility is set to hidden. This is to make everything within the container NOT set to hidden */
/* This is done so content in the inside page can be selected */
.flip-card>* {
visibility: visible;
}
/* An inner container to hold the flip card. This excludes the inside page */
.flip-card__container {
height: 100%;
position: absolute;
right: 0;
-webkit-transform-origin: left;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1s ease;
-ms-transform-origin: left;
transform-origin: left;
transform-style: preserve-3d;
-o-transition: all 1s ease;
transition: all 1s ease;
width: 100%;
}
.card-front,
.card-back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
/* Styling for the front side of the flip card */
/* container for the front side */
.card-front {
background-color: #fafbfa;
height: 15rem;
width: 15rem;
}
/* Front side's top section */
.card-front__tp {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 57% 90%, 50% 100%, 43% 90%, 0 90%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 57% 90%, 50% 100%, 43% 90%, 0 90%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 12rem;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: .75rem;
}
.card-front__tp--city {
background: -webkit-gradient( linear, left top, left bottom, from(#00c735), to(#008724));
background: -o-linear-gradient( top, #00c735, #008724);
background: linear-gradient( to bottom, #00c735, #008724);
}
.card-front__tp--ski {
background: -webkit-gradient( linear, left top, left bottom, from(#d8db00), to(#999c03));
background: -o-linear-gradient( top, #d8db00, #999c03);
background: linear-gradient( to bottom, #d8db00, #999c03);
}
.card-front__tp--beach {
background: -webkit-gradient( linear, left top, left bottom, from(#053bff), to(#021b75));
background: -o-linear-gradient( top, #053bff, #021b75);
background: linear-gradient( to bottom, #053bff, #021b75);
}
.card-front__tp--camping {
background: -webkit-gradient( linear, left top, left bottom, from(#ff3300), to(#801900));
background: -o-linear-gradient( top, #ff3300, #801900);
background: linear-gradient( to bottom, #ff3300, #801900);
}
/* Front card's bottom section */
.card-front__bt {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* Styling for the back side of the flip card */
.card-back {
background-color: #fafbfa;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* Specifically targeting the <video> element */
.card-back img {
height: 100%;
min-height: 100%;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
}
/* Inside page */
.inside-page {
background-color: #f5ffff;
-webkit-box-shadow: inset 20rem 0px 5rem -2.5rem rgba(0, 0, 0, 0.25);
box-shadow: inset 20rem 0px 5rem -2.5rem rgba(0, 0, 0, 0.25);
height: 100%;
padding: 1rem;
position: absolute;
right: 0;
-o-transition: all 1s ease;
transition: all 1s ease;
-webkit-transition: all 1s ease;
width: 15rem;
z-index: 1;
}
.inside-page__container {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
text-align: center;
width: 100%;
}
/* Functionality ====================================*/
/* This is to keep the card centered (within its container) when opened */
.card-instruction:hover {
-webkit-box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0, 0, 0, 0.75);
box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0, 0, 0, 0.75);
width: 30rem;
}
/* When the card is hovered, the flip card container will rotate */
.card-instruction:hover .flip-card__container {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
/* When the card is hovered, the shadow on the inside page will shrink to the left */
.card:hover .inside-page {
-webkit-box-shadow: inset 1rem 0px 5rem -2.5rem rgba(0, 0, 0, 0.1);
box-shadow: inset 1rem 0px 5rem -2.5rem rgba(0, 0, 0, 0.1);
}<section class="card-section">
<div class="card-instruction">
<div class="flip-card">
<div class="flip-card__container">
<div class="card-front">
<div class="card-front__tp card-front__tp--city">
<i class="fas fa-clipboard-check fa-4x"></i>
<h2 class="card-front__heading">
Title
</h2>
<p class="card-front__text-price">
Subtitle
</p>
</div>
<div class="card-front__bt">
<p class="card-front__text-view card-front__text-view--city">
more
</p>
</div>
</div>
<div class="card-back">
<img class="" src="https://www.w3schools.com/css/img_5terre.jpg" />
</div>
</div>
</div>
<div class="inside-page">
<div class="inside-page__container">
<p class="inside-page__text">
Some text
</p>
</div>
</div>
</div>
</section>我已经在 safari 上对其进行了测试，并且运行良好。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？