我遇到了转换叠加层的问题,其中背景和隐藏内容在叠加层完成转换之前不会显示。 “示例标题”文本按原样动画。
预期的行为是当用户将鼠标悬停在框/图像上时,包含文本的绿色背景和图像应向上/向上滑动以覆盖框/图像。它在我测试过的所有浏览器上都按预期工作,而不是在使用Safari和Chrome的iPad上。
您可以在此处找到示例: https://codepen.io/anon/pen/RQYXGo
h2 {
margin-top: 20px;
margin-bottom: 10px;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
font-size: 30px;
}
h2,
p {
margin: 0;
padding: 0;
}
p {
line-height: 1.5;
font-size: 18px;
font-weight: 400;
padding-bottom: 10px;
}
a {
color: #339752;
}
.btn-cta {
background-color: #eed507;
color: #000;
text-transform: uppercase;
border-radius: 0;
border: none;
border-bottom: 5px solid #dcb311;
width: 85%;
font-size: 24px;
font-weight: 600;
padding: 13px 15px;
}
.btn-cta:hover,
.btn-cta:focus,
.btn-cta:active {
color: #333;
}
.col-md-5ths {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
.col-md-5ths {
width: 20%;
float: left;
}
.service {
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
text-align: center;
}
.service img.service-icon {
display: block;
margin: 15px auto;
}
.service p.service-text {
padding: 0 10px 25px;
text-align: center;
font-size: 0.95vw;
}
.service .btn-cta {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
bottom: 20px;
}
.service::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background 0.30s ease-out;
}
.service_media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.service_overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px 0;
color: white;
background-color: rgba(12, 48, 41, 0.9);
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform 0.30s ease-out;
transition: transform 0.30s ease-out;
}
.service:hover .service_overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.service_overlay__title {
text-align: center;
padding: 30px 0;
background-color: rgba(12, 48, 41, 0.9);
-webkit-transform: translateY(-webkit-calc(-100% - 10px));
transform: translateY(calc(-100% - 10px));
transition: -webkit-transform 0.30s ease-out;
transition: transform 0.30s ease-out;
}
.service:hover .service_overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
background-color: transparent;
}
<section class="all-services">
<div class="container-fluid">
<div class="row">
<div class="col-md-5ths col-xs-6">
<article class="service" onclick="">
<img class="service_media" src="http://via.placeholder.com/360x500" alt="" />
<div class="service_overlay">
<h2 class="service_overlay__title">Example title</h2>
<p class="service_overlay__content">
<img class="service-icon" src="http://via.placeholder.com/80x80" alt="">
<p class="service-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="btn btn-cta" href="#">Read More</a></p>
</div>
</article>
</section>
我尝试使用背景而不是background-color
并向z-index
添加更高.service_overlay
,但这似乎没有改变任何内容。
它似乎在其他浏览器上完全正常工作,包括Mac上的Safari。我知道这些都是试图解决这个问题的非常微不足道的尝试,但我真的无法弄清楚为什么会在iPad上发生这种情况。
我也在使用bootstrap 3.3.7。
答案 0 :(得分:0)
想出来。将.service_overlay
从position: absolute
更改为position: fixed
可解决iPad上的问题。