Safari 在另一个过渡中应用 translate3d 过渡时隐藏元素

Question

我注意到，在最新的 Safari 11.1（在 Chrome 和 Firefox 中运行良好）中，当将具有 translate3d 过渡的元素应用到另一个也包含 translate3d 过渡的元素中时，它会在屏幕上消失。

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

视频：

Answer 1

看起来 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>

Answer 2

“看来强制硬件加速可以解决问题”

Source

Answer 3

hiii 我有一个经过测试的解决方案

使用 ......输入占位符=“您的文本”已禁用............

然后使用 placeHolder（在占位符上分配您的文本） 然后用css消除输入的所有背景和阴影， 确保你禁用输入按钮然后 设置占位符文本的样式，就像它是普通文本一样 使用以下语法来定位它

::placeholder{font.size:30px;颜色：红色；）等...

或者，如果您只想在页面中定位该输入，请使用

input::placeholder{ font-size:"", etc.....)

好的，现在你的问题已经解决了，文本可以在 safari 上使用 translate3d 轻松清晰地呈现 然而，safari 默认提供 0.4 到 0.5 的占位符文本不透明度 所以它会是透明的 你怎么解决的.... 是的，有一种方法只需创建两个具有相同占位符标题的相同输入元素的副本；然后给它
位置：绝对； transform:translate(50%,-50%) 或任何您想要的位置，只是将它们全部 3 放在彼此之上以增加 safari 的不透明度，这是我尝试了这么多方法之后的一种方法，并且我失败了......这就像魔术一样