3

在谷歌浏览器中，我发现了以下错误：

我有一个固定大小的 div，位置：绝对，并且有一个简单的变换：

-webkit-transform: translate3d(100px, 100px, 0px)

我将 div 的显示从“block”更改为“none”，然后再次更改为“block”，但 div 不再出现。我注意到删除 position: absolute 解决了这个问题，但这肯定是 Chrome 中的一个错误。

使用以下 html 进行测试（带有红色边框的黄色 div 应每 500 毫秒闪烁一次）

请参阅 jsbin 示例以获取演示（注意：仅可在全屏 jsbin 中重现 - 请不要移动鼠标 - http://jsbin.com/UkOJuxO/1 - 如果您想在可编辑的 jsbin 中查看它，该错误不可重现，因为该页面是在 iframe 中呈现的。但只需使用下面的 html 并使用 Chrome 在本地访问该页面，就可以看到该错误很容易重现）

html是下面的那个。如果您从本地 html 页面在 Chrome 中打开它，则该错误很容易重现。但是如果打开开发工具并将鼠标悬停在闪烁的 div 上，它会出现一次。

在所有其他浏览器中，一切正常，没有任何问题。

<body>
    <div id="test">
    </div>

    <style>

        #test {
          height: 400px;
          width: 400px;
          border: 1px solid red;
          background: yellow;
          position: absolute;
          transform: translate3d(100px, 100px, 0px);
          -ms-transform: translate3d(100px, 100px, 0px);
          -moz-transform: translate3d(100px, 100px, 0px);
          -webkit-transform: translate3d(100px, 100px, 0px)
        }
    </style>

    <script>

        var d = document.getElementById('test')
        var delay = 500

        function blink(){
          d.style.display = 'none'
          setTimeout(function(){
            d.style.display = 'block'
            setTimeout(blink, delay)
          }, delay)
        }

        setTimeout(blink, delay)
    </script>


</body>

4

0 回答 0