Doubts caused by a CSS effect that zooms in on text with the mouse

First on the effect map, there are two kinds,

This is to use transform to change the size and zoom

This is to change the size of the text to zoom, which will cause typographic changes

When using transform, you can obviously feel more stuck than when you use changing the size of the text, and the larger the browser window, the more obvious the stuck.
At that time, I was very puzzled. Just from the rendering mechanism of the browser that I learned before, changing the text size will trigger reflow. When using transform, it will not trigger reflow. Why is it more laggy when using transform? In addition, there is no other content in the webpage, and the lag caused by reflow should not be large.

After my research (guess), it turned out that I added the text shadow, and when I removed the text shadow, it was obviously not stuck.

When using the method of changing the text size, the animation of the text shadow will not be affected.

However, when transform is used, the size of the entire span is changed, which also affects the size of the text shadow, and the browser needs to process more calculations. In addition, if the text is enlarged at the same time in the animation, it will be doubled.

The source code is as follows

   <style>
    body {
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
      background-color: #3498db;
    }

    body>div {
      font-size: 5em;
      font-weight: 700;
    }

    .color {
      animation: maple 1s linear;
    }

    span {
      position: relative;
      display: inline-block;
    }

    @keyframes maple {
      50% {
        font-size: 2em; // transform: scale(2);
        color: #e67e22;
        text-shadow: 0em 0em 10em #f39c12;
      }

      to {
        font-size: 1em; // transform: scale(1);
        color: #d35400;
        text-shadow: 0em 0em 1em #f39c12;
      }
    }
  </style>
  <div>MapleStory­čŹü</div>
  <script>
    "use strict";
    const div = document.querySelector("div");
    const text = div.textContent;
    
    const newText = [...text].reduce((pre, cur, index) => {
      if (!pre) {
        div.innerHTML = "";
        pre = document.createDocumentFragment();
      }
      let span = document.createElement("span");
      span.innerHTML = cur;
      span.addEventListener("mouseover", function () {
        this.classList.add("color");
        console.time("color");
      });
      span.addEventListener("animationend", function () {
        this.classList.remove("color");
        console.timeEnd("color");
      });
      pre.appendChild(span);
      return pre;
    }, 0);
    div.appendChild(newText);
  </script>

But why the bigger the browser window is, the more obvious the freeze is, I don't understand what it has to do with ORZ

Tags: Javascript html5 html css

Posted by bolter on Mon, 23 May 2022 02:38:34 +0300