導致UI灰色區域的MDL工具提示

我在簡單的MDL網站上使用簡單的按鈕實現了材料設計精簡版。當我點擊按鈕時，UI的區域會變灰，直到瀏覽器重新繪製該區域。導致UI灰色區域的MDL工具提示

<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重繪或解決我們所看到的問題？

來源

2016-11-03 Rugnir

我們設法將這個問題跟蹤到工具提示，我們做了一個簡單的修改來修復它。我們只是創造的東西有點像這樣隱藏和顯示鼠標的提示按下和鼠標了：

<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>

這解決了問題，我們

來源

2016-11-07 09:54:40 Rugnir

導致UI灰色區域的MDL工具提示

回答

相關問題