Javascript 缩放元素内的视频和z索引：一些div消失

我在Chrome和Safari中的行为有些奇怪。我有一个缩放（

transform:scale（）

）容器，其中包含视频和其他元素。在某些缩放中，具有高z索引的绝对定位元素消失，不再返回

我怎样才能解决这个问题？ 注意，我不能给视频元素一个负的z索引，我需要使用

overflow:hidden

示例

我举了一个例子，可以上下缩放最外层的容器。在指定的比例值下，顶部带有class
。的元素将消失（文本
“我应该始终在顶部。”
）。当再次缩小时，它突然出现

链接到exmaple：


结论


看起来元素的大小很重要。我做的越大，它消失之前的比例值就越大
我还测试了直接在元素上使用CSS设置
transform:scale（1.4）
，其行为是相同的

如果I:


用div替换视频标记
移除
位置：绝对位置从同级到顶部的
（即下面的
）

移除
溢出：隐藏来自
.content

如果我将
移动到顶部
，则它将放置在文档流中的视频标记之后

（当然，由于项目特定的原因，这些变通方法在现实中对我都不起作用。我也不能给视频元素一个负z索引，我需要使用
溢出：隐藏；
）

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


给视频标签一个负z索引（不能这样做，因为我有时会在视频后面放置元素）
移除
溢出：隐藏（我无法删除溢出：隐藏；
）

浏览器

我在Chrome（Mac）和Safari（Mac）中看到过这个问题


更新1

似乎基本上解决了我的问题。但是，它并没有提供修复程序

更新2

我已经回答了自己的问题，提供了这个问题的解决方案

更新3

有很多答案，要么修改视频的
z-index
，要么将
translateZ
添加到顶部的
。演示表明，这两种方法都解决了这个问题。
然而，由于我的HTML结构是一个可视化HTML编辑器（长话短说…）的输出，我不知道那里会有什么元素，或者它们应该在视频的前面、下面还是旁边。因此，我正在寻找一种解决方案，该解决方案不需要更改缩放元素中的单个元素。
我上周偶然发现了类似的东西，其中包括定位绝对元素和变换

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


最后，我通过使用一个转换修复了它：translateX（无）与translateX（0）

超级奇怪的行为是肯定的，但该链接提供了更多的链接，以帮助使事情更清楚-就像它的行为符合规范一样。
我通过放置
z-index:-1打开
视频

由于溢出被隐藏，所以发生这种情况。下面是工作链接


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


在Firefox中的位置：


现在，很明显，Chrome使用了错误的大小来推断
.on top
完全在
.content
之外，并且由于隐藏溢出而将其隐藏（它不应该这样做，但显然它试图优化掉视频上方显示的任何元素）。示例：

比例：1.225
父级宽度：1254.40
左子女：1254.40-（100+90）*1.225=1021.65
结果：小于1024（部分内部）
比例：1.230
父宽度：1259.52
左子女：1259.52-（100+90）*1.230=1025.82
结果：大于1024（完全在外部）

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


var目标标度=140；
var startScale=100；
var currentScale=100；
var shouldScaleUp=true；
var container=document.getElementById（“缩放”）；
var scaleInfo=document.getElementById（“缩放信息”）；
函数步骤（）{
container.style.transform=“scale”（+（currentScale/100）+”）；
scaleInfo.innerText=“比例：”+（当前比例/100）；
如果（当前刻度===目标刻度）{
shouldScaleUp=false；
}
如果（当前刻度===开始刻度）{
shouldScaleUp=true；
}
如果（应缩放）{
电流标度+=0.5；
}否则{
电流标度-=0.5；
}
window.requestAnimationFrame（步骤）；
}
window.requestAnimationFrame（步骤）
.scale信息{
位置：固定；
左：0；
排名：0；
}
#缩放{
背景:#中交;；
宽度：1024px；
高度：768px；
位置：固定；
左：200px；
顶部：200px；
}
.内容{
身高：100%；
溢出：隐藏；
位置：相对位置；
左边距：自动；
右边距：自动；
背景：rgba（34,34,56,0.2）；
}
.以下{
位置：绝对位置；
宽度：300px；
高度：300px；
右：0px；
顶部：100px；
背景：紫色；
z指数：1；
不透明度：0.8；
}
.低于-2{
z指数：3；
右：100px；
}
.低于-3{
z指数：4；
右：400px；
}
.在上面{
位置：绝对位置；
宽度：50px；
右：100px；
顶部：150px；
背景：粉红色；
z指数：5；
填充：20px；
/*200px边框将元素移向
.content {
overflow:visible;
}

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

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