javascript - 缩放元素内的视频和 z-index : some divs disappear

Question

我在 Chrome 和 Safari 中有一些奇怪的行为。我有一个缩放的 (transform: scale()) 容器，里面有视频和其他元素。在某些缩放比例下，具有高 z-index 的绝对定位元素会消失并且不会再次出现。

我该如何解决这个问题？请注意，我不能为视频元素提供负 z-index，我需要使用 overflow: hidden;。

示例

我做了一个上下缩放最外层容器的例子。在特定比例值下，具有类 .on-top 的元素(和文本 “我应该永远在最前面。”)消失。再次缩小时突然出现。

示例链接:https://jsfiddle.net/iafiawik/Lcox1ecc/

结论

• 元素的大小似乎很重要。我做得越大，它消失前的比例值就越大。
• 我还测试了直接在元素上使用 CSS 设置 transform: scale(1.4)，行为是相同的。

问题不存在，如果我:

• 用 div 替换视频标签
• 将position: absolute;从siblings移除到.on-top(即.below)
• 从 .content 中移除 overflow: hidden;
• 如果我将 .on-top 移动到文档流中的视频标签之后

(当然，由于元素的具体原因，这些变通办法在现实中对我都不起作用。我也不能给视频元素一个负的 z-index 并且我需要使用overflow : 隐藏;.)

社区建议的解决方法(谢谢!)

• 给视频标签一个负的 z-index(不能这样做，因为我有时会在视频后面放置元素)
• 移除overflow: hidden;(我无法移除overflow: hidden;)

浏览器

我在 Chrome (Mac) 和 Safari (Mac) 中看到过这个问题。

---

更新 1

好像this bug report几乎涵盖了我的问题。但是，它没有提供修复方法。

更新 2

我已经通过提供我对这个问题的解决方案来回答我自己的问题。

更新 3

有很多答案进来，要么修改视频的 z-index ，要么 添加 translateZ 到 .on-top 元素。演示表明，这两种方法都可以解决问题。但是，由于我的 HTML 结构是可视化 HTML 编辑器的输出(长话短说......)，我不知道那里会有哪些元素，或者它们是否应该位于视频的前面、下面或旁边。因此，我正在寻找一种不需要更改缩放元素内的单个元素的解决方案。

Answer 1

这看起来像是 Chrome 中的错误。请注意，当您缩放图像时，元素检查器会不断告诉您 #scaled 的大小是 1024x768:

在 Firefox 中的位置

现在，显然，Chrome 使用错误的大小得出 .on-top 的结论完全在.content之外并由于 overflow hidden 而将其隐藏(它不应该这样做，但显然它正在尝试优化显示在视频上方的任何元素)。示例:

Scale: 1.225
Parent width: 1254.40
Child left: 1254.40 - (100 + 90) * 1.225 = 1021.65
Result: less than 1024 (partially inside)

Scale: 1.230
Parent width: 1259.52
Child left: 1259.52 - (100 + 90) * 1.230 = 1025.82
Result: greater than 1024 (completely outside)

不幸的是，我找不到一个优雅的解决方案。理想情况下，您应该修改 HTML 标记和 CSS，也许将顶部元素与左边缘对齐。作为最后的手段，您可以使用透明边框将元素向左移动更多:

var goalScale = 140;
var startScale = 100;
var currentScale = 100;
var shouldScaleUp = true;
var container = document.getElementById("scaled");
var scaleInfo = document.getElementById("scale-info");

function step() {
  container.style.transform = "scale(" + (currentScale / 100) + ")";
  scaleInfo.innerText = "Scale: " + (currentScale / 100);
  if (currentScale === goalScale) {
    shouldScaleUp = false;
  }
  if (currentScale === startScale) {
    shouldScaleUp = true;
  }
  if (shouldScaleUp) {
    currentScale += 0.5;
  } else {
    currentScale -= 0.5;
  }
  window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);

.scale-info {
  position: fixed;
  left: 0;
  top: 0;
}

#scaled {
  background: #cccccc;
  width: 1024px;
  height: 768px;
  position: fixed;
  left: 200px;
  top: 200px;
}

.content {
  height: 100%;
  overflow: hidden;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  background: rgba(34, 34, 56, 0.2);
}

.below {
  position: absolute;
  width: 300px;
  height: 300px;
  right: 0px;
  top: 100px;
  background: purple;
  z-index: 1;
  opacity: 0.8;
}

.below-2 {
  z-index: 3;
  right: 100px;
}

.below-3 {
  z-index: 4;
  right: 400px;
}

.on-top {
  position: absolute;
  width: 50px;
  right: 100px;
  top: 150px;
  background: pink;
  z-index: 5;
  padding: 20px;
  /* a 200px border moves the element towards left */
  border-left: 200px solid transparent;
  background-clip: padding-box;
}

.on-top h1 {
  font-size: 20px;
}

#video {
  position: absolute;
  z-index: 4;
  width: 1024px;
  height: 768px;
  background: rgba(0, 0, 0, 0.4);
}

<div id="scale-info"></div>

<div id="scaled">
  <div class="content">
    <h2 class="below below-1"> I have z-index 1</h2>
    <div class="on-top">
      <h1> I should always be on top.<br> I have z-index 5</h1>
    </div>
    <h2 class="below below-2"> I have z-index 3</h2> <video id="video" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    <h2 class="below below-3"> I have z-index 4</h2>
  </div>
</div>