标签：javascript css3 css-transitions webkit safari

我注意到在最新的Safari 11.1中(在Chrome和Firefox中运行良好),当在另一个包含translate3d转换的元素中应用它时,具有translate3d转换的元素在屏幕上消失.

复制在这里：
https://jsfiddle.net/chq2qfm8/66/

视频：

解决方法:

看起来Safari是新的IE,但你也可以使用translateY,它也是“3d”：

更新为PO“也可能有X移动”我也添加了X组件.

init();

function init() {
  bindEvents();
}

function bindEvents() {
  document.querySelector('.scrollUp').addEventListener('click', scrollUp, false);
  document.querySelector('.scrollDown').addEventListener('click', scrollDown, false);

}

function scrollDown() {
  document.querySelector('.panels')
  .style.transform = 'translateX(100px) translateY(-' + window.innerHeight + 'px)';

  document.querySelector('.panel1 .panel-bg')
  .style.transform = 'translateX(100px) translateY(-20px)';


  document.querySelector('.panel2 .panel-bg')
  .style.transform = 'translateX(-100px) translateY(-20px)';
}

function scrollUp() {
  document.querySelector('.panels')
  .style.transform = 'translateX(0) translateY(0)';

  document.querySelector('.panel1 .panel-bg')
  .style.transform = 'translateX(-100px) translateY(-20px)';

  document.querySelector('.panel2 .panel-bg')
  .style.transform = 'translateX(100px) translateY(-20px)';

}

html,
body {
  overflow: hidden;
  height: 100%;
  padding: 0;
  margin: 0;
  color: red;
  font-weight: bold;
}

.panels {
  position: relative;
  width: 100%;
  height: 100%;
  transition: all 1000ms ease;
}

.panel,
.panel-bg {
  width: 100%;
  height: 100%;
}

.panel-bg {
  background-image: url(https://www.w3schools.com/howto/img_fjords.jpg);
  background-size: cover;
  transition: transform 700ms ease;
}

.panel2 .panel-bg {
  background-image: url('https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067');
}

.panel {
  overflow: hidden;
}

.panel-bg {
  top: 0;
  left: 0;
  width: 100%;
}

.actions {
  position: fixed;
  z-index: 777;
  left: 20px;
  top: 20px;
}

.acions button {
  display: inline-block;
}

<div class="actions">
  <button class="scrollDown">
        Scroll down
    </button>
  <button class="scrollUp">
        Scroll up
    </button>
</div>

<div class="panels">
  <div class="panel panel1">
    <div class="panel-bg">
      TEST <br>TESTTEST <br>TESTTEST <br>TESTTEST <br>TESTTEST <br>TEST<br>TESTTEST <br>TESTTEST <br>TESTTEST <br>TESTTEST <br>TEST</div>
  </div>
  <div class="panel panel2">
    <div class="panel-bg">
      TEST <br>TESTTEST <br>TESTTEST <br>TESTTEST <br>TESTTEST <br>TEST<br>TESTTEST <br>TESTTEST <br>TESTTEST <br>TESTTEST <br>TEST
    </div>
  </div>
</div>

标签：javascript,css3,css-transitions,webkit,safari
来源： https://codeday.me/bug/20190701/1347634.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。