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

Question

我在一个带有 Material Design Lite 的简单 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 的灰色区域

MDL tooltips causing grey areas of UI

material-design-lite