缩放元素内的视频和 z-index：一些 div 消失

Question

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

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

示例

我做了一个例子，可以上下缩放最外面的容器。在特定的比例值处，具有类.on-top（和文本"I should always be on top."）的元素消失。再次缩小时突然出现。

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

结论

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

如果我满足以下条件，则问题不存在：

• 用 div 替换 video 标签
• 将position: absolute;从兄弟姐妹中删除到.on-top（即.below）
• 从.content 中删除overflow: hidden;
• 如果我移动.on-top，使其位于文档流中的视频标签之后

（当然，由于项目的具体原因，这些变通方法实际上都不适合我。我也不能给视频元素一个负的 z-index，我需要使用overflow: hidden;。 )

社区建议的解决方法（谢谢！）

• 给视频标签一个负的 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 之外，并且由于隐藏溢出而将其隐藏（它不应该是这样做但显然它试图优化掉显示在视频上方的任何元素）。例子：

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>

Answer 2

给你：https://jsfiddle.net/Lcox1ecc/423/

您只需将-webkit-transform: translateZ(0); 添加到.on-top 类。

编码愉快！

Answer 3

在花了很多时间研究这个问题并尝试了很多不同的方法之后，我得出的结论是，没有解决方案可以解决我的问题。如果您能够控制消失的元素的 z 索引，则有解决该问题的解决方案，但我无法这样做，因为 HTML 的结构未知（它是 HTML 编辑器的输出）。我一直在寻找一种解决方案，该解决方案不需要将单个子级更改为缩放的父级，但到目前为止我还没有找到任何解决方案。

This bug report 几乎涵盖了我的问题，但它没有提供解决方案。

我可以确认这是因为元素超出了缩放容器的原始宽度和高度：

元素在scale(1.227)可见（红色边框表示#scaled的原始大小）：

...但不在scale(1.228):

因此，我的解决方案是在未缩放的缩放元素之外添加另一个包装元素，但根据其第一个子缩放值更新其 width 和 height 属性。此元素具有overflow: hidden; 并防止元素可见。

这不是一个完美的解决方案，因为在缩放元素和最外层的包裹元素之间可能会遇到一个小间隙（舍入问题），但考虑到这种情况，这是我能做的最好的事情。

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

function step() {
  var contentWidth = 1024;
  var contentHeight = 768;
  container.style.transform = "scale(" + (currentScale / 100) + ")";

  scaledContainer.style.width = contentWidth * ((currentScale / 100)) + "px";
  scaledContainer.style.height = contentHeight * ((currentScale / 100)) + "px";

  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);

#resized-container {
  position: fixed;
  width: 1024px;
  height: 768px;
  overflow: hidden;
  border: 10px solid red;
  top: 200px;
  left: 200px;
}

#scaled {
  background: #cccccc;
  width: 1024px;
  height: 768px;
  position: absolute;
  transform-origin: left top;
}

.content {
  height: 100%;
  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: -30px;
  top: 150px;
  background: pink;
  z-index: 5;
  padding: 20px;
}

.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="resized-container">
  <div id="scaled">
    <div id="scale-info">

    </div>
    <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>
</div>

Answer 4

如果您可以稍微修改一下 html，一种方法是将有问题的元素包装在与视频和容器大小相同的容器中，并具有适当的 z-index。这样，您将拥有相同大小和位置的清晰图层，您可以在其中放置更复杂的元素。比如这样：

   <div id="top-container">
     <div class="on-top">
      <h1>
        I should always be on top.<br /> I have z-index 5
      </h1>
    </div>
   </div>

  #top-container {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 5;
  }

https://jsfiddle.net/06oykj8o/4/

Answer 5

我通过将z-index:-1; 放在video 上来解决这个问题。

https://jsfiddle.net/Lcox1ecc/312/

Answer 6

我真的很喜欢Salman A 的回答。 唯一想到的就是用position: relative 重写。 但我不知道这是否是一种选择。

Answer 7

上周我偶然发现了与此类似的东西，其中包括定位绝对元素和变换...

我不知道这是否会帮助你，但这里有一个链接。

CSS transform: translate moves postion:fixed inner Div

最后我通过使用转换来修复它：translateX(none) vs translateX(0)。

肯定是超级奇怪的行为，但该链接提供了更多链接以帮助使事情更加清晰 - 就像它的行为符合规范一样。

Answer 8

这是因为溢出被​​隐藏了。这里是工作链接

https://jsfiddle.net/Lcox1ecc/322/

.content {
overflow:visible;
}

Answer 9

可能会迟到，但只是发布以防有人发现它有帮助。 在带有变换动画的父容器元素下添加一个空 div，任何东西都不会消失。动画不做任何事情，但它强制浏览器使用硬件加速渲染所有元素。

<div class="emptydiv"></div>

    .emptydiv{
      transform:scale(1);
      animation:fix 3s infinite;
    }
    
    @keyframes fix{
      50%{
        transform:scale(1);
      }
    }