The newly added element blinks #319

rmstsd · 2024-11-14T08:43:43Z

In this case, the newly added element blinks when the button is clicked.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tt</title>

    <style>
      .widget-name h2 {
        font-size: 12px;
      }

      .widget-name[min-width~='400px'] h2 {
        font-size: 18px;
      }

      .widget-name[min-width~='600px'] h2 {
        padding: 55px;
        text-align: center;
        font-size: 24px;
      }

      .widget-name[min-width~='700px'] h2 {
        font-size: 34px;
        color: red;
      }
    </style>

    <script src="./ResizeSensor.js"></script>
    <script src="./ElementQueries.js"></script>
  </head>

  <body>
    <button>click</button>
  
    <div class="container"></div>

    <script>
      document.querySelector('button').addEventListener('click', function () {
        const innerHTML = `
          <div class="widget-name">
            <h2>Element responsiveness FTW!</h2>
          </div>
        `

        document.querySelector('.container').innerHTML = innerHTML
      })
    </script>
  </body>
</html>

20241114-164216.mp4

rmstsd · 2024-11-14T09:05:43Z

Is it okay to use MutationObserver for the body to listen for additions to the dom? @marcj

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

The newly added element blinks #319

The newly added element blinks #319

rmstsd commented Nov 14, 2024

rmstsd commented Nov 14, 2024

The newly added element blinks #319

The newly added element blinks #319

Comments

rmstsd commented Nov 14, 2024

rmstsd commented Nov 14, 2024