Overflow fails to render if it's in a 'position: relative' div, when an animation is playing in DOM (Chrome)

Question

I've found some unexpected behaviour with a random content in my app disappearing when a loading indicator elsewhere in the app is visible.

I managed to hack the HTML into a minimal reproducible example.

The visualisation is inside a react-virtualized-auto-sizer, which ultimately puts it's content in a div with the CSS:

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

It also injects position: relative; to the parent div. If either of these conditions are not met it displays fine. Similarly, if the animation on the rotating div is not present, it displays fine.

It's only if all these conditions (animation in the DOM tree, content inside a overflow: visible div inside a position: relative div) fails to render:

<!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>

The renderer is optimizing out your element because it has no size. If you do anything to give it an area, it will display. Height or width of 1px will do. Border or padding of 1px will do as well. — Jason Goemaat, Sep 15 '20 at 16:29

Claytronicon · Accepted Answer · 2020-09-15T16:30:30.873

If the child div is also position:relative, it seems to work. Default position is static.

Also if you add -webkit-transform: translateZ(0) to the overflow element, it renders properly:

Fixed element disappears in 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>

That's better than my current work around (setting `width: 1px !important`). Thanks. — Joe, Sep 16 '20 at 11:39

Overflow fails to render if it's in a 'position: relative' div, when an animation is playing in DOM (Chrome)

1 Answers1