CSS - 转换：Chrome / Safari中的扩展问题

时间：2018-01-11 17:04:21

标签： html css css-transitions css-transforms

我尝试重新创建此codepen转换：我网站上特定网页的转换比例。它在Firefox上工作正常，但它在Chrome或Safari上无法正常工作。在这些平台上，图像变换正常，但在分配的时间刻度（在这种情况下为一秒）过后，然后快照/猛拉。我之所以相信这可能是这种风格规则的常见错误，但我还是找不到解决方案。在此阶段，我无法将图像从<img>更改为背景图像结构。

我已使用此代码段重新创建了该问题 -

＆＃13;
＆＃13; 
/* Partners page */

.masonry {
  /* Masonry container */
  column-count: 5;
}

.brick img {
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Gotham-Light';
  margin: 0;
  background: #fff;
  font-size: 25px;
}

.wrapper {
  width: 80%;
  margin: 3em auto;
}

.masonry {
  margin: 1.5em 0;
  padding: 0;
  -moz-column-gap: 1.5em;
  -webkit-column-gap: 1.5em;
  column-gap: 1.5em;
  font-size: .85em;
  vertical-align: bottom;
}

.brick {
  display: inline-block;
  margin: 0 0 1em;
  width: 100%;
  transition: transform 1s;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}


/* Image words / text hover effect */

.brick {
  opacity: .99;
  position: relative;
}

.wrapper .brick .details {
  padding: 0px 20px 20px 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  opacity: 0;
  transition: .7s ease;
  background: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0));
}

.wrapper .brick:hover {
  -webkit-transform: scale(1.5);
  position: relative;
  z-index: 9;
}

.brick:hover .details {
  opacity: 1;
}

.brick .details span {
  opacity: 0;
  top: 0;
  /* 100px */
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.brick .details #title {
  line-height: 1.5;
  font-weight: 500;
  font-size: 18px;
}

.brick .details #info {
  line-height: 1.2;
  font-weight: 500;
  font-size: 20px;
}

.brick:focus:before,
.brick:focus span,
.brick:hover:before,
.brick:hover span {
  opacity: 1;
}

.brick:focus:before,
.brick:hover:before {
  top: 0;
  /* 50% */
}

.brick:focus span,
.brick:hover span {
  top: 0;
}

.brick:focus #title,
.brick:hover #title {
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}

.brick:focus #info,
.brick:hover #info {
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}


/* -------------------------   */
＆＃13; 
<div class="wrapper">
  <div class="masonry">
    <div class="partner">
      <a href="index.html"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509810535/Certo-120x72_hrw5eq.png" style="width: 180px; height: 120px;" class="partimg"></a>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat.</p>
    </div>
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449086/2brand_identity_oo9udc.jpg">
      <div class="details">

        <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna</span>
      </div>
    </div>
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449069/2print_zszssh.jpg">
      <div class="details">

        <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna</span>
      </div>
    </div>
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449077/2graphic_design_obcmif.jpg">
      <div class="details">

        <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span>
      </div>
    </div>
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449069/2print_zszssh.jpg">
      <div class="details">

        <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span>
      </div>
    </div>
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449086/2brand_identity_oo9udc.jpg">
      <div class="details">

        <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span>
      </div>
    </div>
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449077/2graphic_design_obcmif.jpg">
      <div class="details">

        <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span>
      </div>
    </div>
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449069/2print_zszssh.jpg">
      <div class="details">

        <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span>
      </div>
    </div>
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449077/2graphic_design_obcmif.jpg">
      <div class="details">

        <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span>
      </div>
    </div>
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449069/2print_zszssh.jpg">
      <div class="details">

        <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span>
      </div>
    </div>
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449077/2graphic_design_obcmif.jpg">
      <div class="details">

        <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span>
      </div>
    </div>
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449086/2brand_identity_oo9udc.jpg">
      <div class="details">

        <span id="info">Quisque vel felis lectus donec vitae dapibus magna, Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. </span>
      </div>
    </div>

  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

任何帮助表示赞赏。

0 个答案:

没有答案
相关问题
最新问题