UIの灰色の領域を引き起こすMDLツールチップ

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> 

これが私たち

のための問題を解決しました