Question

我在简单的MDL网站上使用了一个带有材质设计精简版的按钮的简单实现。当我单击按钮时，UI的区域变为灰色，直到浏览器重新绘制该区域。

<button onclick="ZoomWindow();" class="mdl-button mdl-js-button mdl-button--icon" id="ZoomWindow" style="vertical-align:top;">
   <!-- Zoom Window -->
   <i class="material-icons md-light">loupe</i>
</button>
<div class="mdl-tooltip mdl-tooltip--right" for="ZoomWindow">
   Zoom window
</div>

使用这种方式设置的所有按钮都不会发生这种情况，这让我们相信这可能是某种时间问题。

我已将问题缩小到工具提示，因为当它被移除时，问题不再发生。

有没有办法强制整个DOM重绘，或修复我们看到的问题？

Answer 1

我们设法将此问题跟踪到工具提示，我们进行了一个简单的修改来修复它。我们只是创建了一些类似这样的东西来隐藏并显示鼠标按下和鼠标按下的工具提示：

 <script>
        function hideTooltips(){
            $(".mdl-tooltip").css('display','none');
        }

        function unhideTooltips(){
            $(".mdl-tooltip").css('display','inline');
        }
 </script>
<button onmousedown="hideTooltips();" onmouseup="unhideTooltips();ZoomWindow();" class="mdl-button mdl-js-button mdl-button--icon" id="ZoomWindow" style="vertical-align:top;">
   <!-- Zoom Window -->
   <i class="material-icons md-light">loupe</i>
</button>
<div class="mdl-tooltip mdl-tooltip--right" for="ZoomWindow">
   Zoom window
</div>

这解决了我们的问题

MDL工具提示导致UI的灰色区域

1 个答案: