带有视差效果的滚动中的Safari抖动

时间:2018-12-23 22:50:14

标签: javascript html css

使用Chrome和Firefox,我没有这个问题,只有Safari甚至技术预览版都没有这个问题。

我制作了CodePen,它将在滚动时显示“测试”框在Safari中抖动。

https://codepen.io/MariusZMM/pen/bOWaGj

.box {
  transform: translateY(var(--translateY));
}

.title {
  position: relative;
  text-align: center;
  color: rgb(255, 255, 255);
  margin: auto 0;
  bottom: -200px;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 10px 40px;
  border: 1px solid #00000081;
}

.parallax_cover {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 100%;
}

.pic1 {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  /* When disabling this i get jitter in Chrome to */
  background-attachment: fixed; 
}

.pic1 {
  background-image: url('https://images.pexels.com/photos/1563355/pexels-photo-1563355.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  min-height: 100%;
}

0 个答案:

没有答案