Chrome图像不透明度错误[出现奇怪的行]

Question

我遇到了这个奇怪的错误。但到目前为止仅在Chrome中。 Firefox和IE11做得很好 问题是：

当我将鼠标悬停在我的投资组合中的图像上时，不透明度从0.7下降到0.2。转换完成后，会出现一条看起来不受不透明度属性影响的奇怪行。

系统规格：

• Windows 7 Home Premium Service Pack 1 // Chrome 38.0.2125.111 m
• 屏幕分辨率：1920 x 1080
• 显卡：nVidea GeForce GT650m

---

这是link to a demo site。

您可以在此处看到屏幕截图中的行：

这是一个有效的代码片段：

＆＃13;

＆＃13;

.grid figure {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: -0.135em;
  width: 33.333%;
  text-align: center;
  cursor: pointer;
}
.grid figure img {
  position: relative;
  display: block;
  opacity: 0.8;
}
.grid figure figcaption {
  padding: 2em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
  pointer-events: none;
}
.grid figure figcaption,
.grid figure a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.grid figure a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}
.grid figure h2 {
  word-spacing: -0.15em;
  font-weight: 700;
}
.grid figure h2 span {
  font-weight: 300;
  margin-right: 5px;
  float: left;
  margin-top: -1px;
  font-size: 31px;
}
.grid figure h2,
.grid figure p {
  margin: 0;
}
.grid figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
  clear: left;
}
figure.effect-lily img {
  width: calc(100% + 50px);
  opacity: 0.7;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
}
figure.effect-lily figcaption {
  top: auto;
  bottom: 0;
  height: 50%;
  text-align: left;
  padding: 10%;
}
figure.effect-lily h2,
figure.effect-lily p {
  -webkit-transform: translate3d(0, 40px, 0);
  transform: translate3d(0, 40px, 0);
}
figure.effect-lily h2 {
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}
figure.effect-lily p {
  color: #fff;
  opacity: 0;
  -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
  transition: opacity 0.2s, transform 0.35s;
  font-size: 18px;
  font-weight: 300;
  text-transform: capitalize;
}
figure.effect-lily:hover img {
  opacity: 0.2;
}
figure.effect-lily:hover p {
  opacity: 0.5;
}
figure.effect-lily:hover img,
figure.effect-lily:hover h2,
figure.effect-lily:hover p {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
figure.effect-lily:hover p {
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
}
figure.effect-lily p.cursive {
  font-weight: 700;
}

＆＃13;

<figure class="effect-lily double">
  <img src="http://www.baasdesign.nl/projects/Bootstrap/images/5.jpg" alt="img01" />
  <figcaption>
    <h2><span>Stichting</span>Werkartaal</h2>
    <p>Meer in reïntegratie</p>
  </figcaption>
  <a href="werkartaal.html">View more</a>
</figure>

＆＃13;

＆＃13;

＆＃13;

任何人都知道这可能是什么？