元素瞬间异地渲染答案

【问题标题】：Element split-second out of place rendering元素瞬间异地渲染
【发布时间】：2016-05-20 16:39:00
【问题描述】：

Plunker：https://plnkr.co/edit/6aBljcPRK78pLegnyL5p

好的，所以这个例子（在 plunker 中，也作为代码 sn-p 附加到这个问题）非常简单。有一个可以单击的 div（“按钮”）。单击时，其中会显示一个加载元素。当“操作”完成时（这里用 setTimeout 代替），加载元素应该会消失，并且 div 上方会出现一个消息区域。

我看到的效果（只有在“操作”立即完成时才会发生）是加载元素（在我的示例中为 Font Awesome 图标）在框外呈现一瞬间。

注意：第一次单击该元素时，可能根本不会显示加载图标。只需使用“重置”按钮并再次单击即可。对我来说，它每次都可以生产。

由于两个元素的显示属性同时更改，我希望浏览器将加载图标保留在框内，直到它消失。然而，情况似乎并非如此。

我使用了纯 HTML / CSS / Javascript（嗯，Font Awesome）以避免任何错误/奇怪的行为。

这就是浏览器的呈现方式吗？除了使用超时来延迟设置任一属性（我认为这对于这个用例来说真的很难看）之外，还有其他方法可以避免这种影响吗？我不相信这是纯粹的视觉效果（我的眼睛在欺骗我），但它可能是......

我尝试了以下方法来查看是否有任何变化（但没有）：

将图标绝对定位在“.content”元素内。
将图标替换为静态<img> 标签。
明确隐藏图标元素，而不仅仅是父元素。

#messageBox {
  display: none;
  height: 50px;
  background-color: #cccccc;
  margin: 10px;
}

#element .content {
  position: relative;
  width: 120px;
  margin: 0;
  padding: 10px;
  float: left;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  font-size: 14px;
  text-align: center;
}

#element .content .shadow {
  height: 124px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  border-radius: 4px;
  border: 1px dashed #ccc;
  padding-top: 32px;
  color: #bbb;
  cursor: pointer;
}

#element .content .shadow:hover {
  color: #888;
  border-color: #999;
}

#element .content .shadow.inactive {
  color: #bbb;
  border-color: #999;
  cursor: default;
  padding-top: 48px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Positioning plunker</title>

    <link data-require="font-awesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />

    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <script type = 'text/javascript'>
      window.doSomething = function() {
        var action = document.getElementById('actionButton');
        var icon = document.getElementById('icon');
        var message = document.getElementById('messageBox');

        icon.style.display = "block";

        window.setTimeout(function() {
          message.style.display = 'block';
          icon.style.display = 'none';
        }, 50);
      };
      
      window.reset = function() {
        var action = document.getElementById('actionButton');
        var icon = document.getElementById('icon');
        var message = document.getElementById('messageBox');
        
        action.style.display = 'block';
        icon.style.display = 'none';
        message.style.display = 'none';
      };
    </script>

    <div id="messageBox">Some box containing stuff to push down the content...</div>

    <div id="element">
      <div class="content" style="border:1px solid black; padding: 0">
        <div id="actionButton" class="shadow" onclick="doSomething();">
          <i id="icon" style="display: none" class="fa fa-cog fa-2x text-info"></i>
        </div>
      </div>
    </div>

    <button onclick="reset(); return false;">Reset</button>
  </body>
</html>

【问题讨论】：

标签： javascript html css browser rendering

【解决方案1】：

我拍摄了一段视频，并通过点击制作了一个慢动作 gif。我很确定这只是一种视错觉。以下是视频中的八帧：

我第一次看到这个。似乎是经典的“笼中鸟”错觉。

window.setInterval(function() {
  icon.style.display = "block";
  message.style.display = "none";
}, 60)

window.setInterval(function() {
  message.style.display = 'block';
  icon.style.display = 'none';
}, 50);

【讨论】：