View All Attachments for Bug 243949

Attachment #461639
Code reproduction	text/html	2022-08-15 12:41:13 PDT	1.31 KB	no flags	Details

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>z-index crash</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
    />
    <style>
      .item .native {
        position: relative;
        z-index: 1;
      }
        
      .item .native::after {
        position: relative;
        content: "";
        z-index: -1;
      }
    </style>
  </head>


  <body>
    <button onclick="crash()">Crash</button>
    <div class="container">
      <div class="item">
        <div class="native">
          <div class="inner">
            <img src="https://picsum.photos/200/300" />
          </div>
        </div>
      </div>
    </div>
  </body>
  
  <script>
    const container = document.querySelector('.container');
    
    let template = '';
    
    for (let i = 0; i < 500; i++) {
      template += `
        <div class="item">
          <div class="native">
            <div>
              <img src="https://picsum.photos/200/300" />
            </div>
          </div>
        </div>
      `
    }
    
    container.innerHTML = template;
    
    const crash = () => {
      container.animate([
        { offset: 0, transform: 'translate3d(0, 0, 0)' },
        { offset: 1, transform: 'translate3d(0, 0, 0)' }
      ], 500);
    }
  </script>
</html>

Attachment #461661
Static testcase	text/html	2022-08-15 21:27:25 PDT	1.15 KB	no flags	Details

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>z-index crash</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
    />
    <style>
        .container {
            transform: translate3d(0, 0, 0);
        }
      .item .native {
        position: relative;
        z-index: 1;
      }
        
      .item .native::after {
        position: relative;
        content: "";
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">
        <div class="native">
          <div class="inner">
            <img src="https://picsum.photos/200/300" />
          </div>
        </div>
      </div>
    </div>
  </body>
  
  <script>
    const container = document.querySelector('.container');
    
    let template = '';
    
    for (let i = 0; i < 20; i++) {
      template += `
        <div class="item">
          <div class="native">
            <div>
              <img src="https://picsum.photos/200/300" />
            </div>
          </div>
        </div>
      `
    }
    
    container.innerHTML = template;
  </script>
</html>