时间戳

首页 > 解决方案 > 当动画在 DOM (Chrome) 中播放时，如果它位于“位置：相对”div，则溢出无法呈现

html - 当动画在 DOM (Chrome) 中播放时，如果它位于“位置：相对”div，则溢出无法呈现

问题描述

我发现一些意外行为，当应用程序中其他地方的加载指示器可见时，我的应用程序中的随机内容消失了。

我设法将 HTML 破解为一个最小的可重现示例。

可视化位于 areact-virtualized-auto-sizer中，最终将其内容放入带有 CSS 的 div 中：

  overflow: visible;
  height: 0px;
  width: 0px;

它还注入position: relative; 到父 div。如果不满足其中任何一个条件，则显示正常。同样，如果animation旋转 div 上的 不存在，则显示正常。

只有当所有这些条件（DOM 树中的动画、overflow: visiblediv 中的position: relativediv 中的内容）都无法呈现时：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .animate {
        animation: spin 4s infinite linear;
        width: 40px;
      }

      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      .relative {
        position: relative;
        height: 20px;
      }

      .overflow {
        overflow: visible;
        height: 0px;
        width: 0px;
      }
    </style>
  </head>

  <body>
    <div class="animate">
      anim
    </div>
    There should "text" visible below
    <div class="relative">
      <div class="overflow">
        text
      </div>
    </div>
    There should "text" visible above
  </body>
</html>

标签： htmlcss

解决方案

如果子 div 也是位置：相对，它似乎工作。默认位置是静态的。

此外，如果您将 -webkit-transform: translateZ(0) 添加到溢出元素，它会正确呈现：

固定元素在 Chrome 中消失

<!DOCTYPE html>
<html>
  <head>
    <style>
      .animate {
        animation: spin 4s infinite linear;
        width: 40px;
      }

      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      .relative {
        position: relative;
        height: 20px;
      }

      .overflow {
        overflow: visible;
        height: 0px;
        width: 0px;
      }
    </style>
  </head>

  <body>
    <div class="animate">
      anim
    </div>
    There should "text" visible below
    <div class="relative">
      <div class="overflow" style="position:relative;">
        text
      </div>
    </div>
    There should "text" visible above
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      .animate {
        animation: spin 4s infinite linear;
        width: 40px;
      }

      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      .relative {
        position: relative;
        height: 20px;
      }

      .overflow {
        overflow: visible;
        height: 0px;
        width: 0px;
        -webkit-transform: translateZ(0)
      }
    </style>
  </head>

  <body>
    <div class="animate">
      anim
    </div>
    There should "text" visible below
    <div class="relative">
      <div class="overflow">
        text
      </div>
    </div>
    There should "text" visible above
  </body>
</html>

推荐阅读