0

I am using a simple implementation of a button on a simple MDL website with material design lite. When i click the button, areas of the UI go grey until the browser repaints that area.

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

It doesnt happen with all buttons set up this way, leading us to believe it could be some kind of timing issue.

I have narrowed the problem down to the tooltip, as when it is removed, the problem no longer occurs.

Is there a way to force the entire DOM to redraw, or a fix for the issue we are seeing?

Rugnir
  • 239
  • 5
  • 12

1 Answers1

0

We managed to track this problem down to the tooltips, and we made a simple modification to fix it. We simply created something a little like this to hide and show the tooltip on mouse down and mouse up:

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

This solved the issue for us

Rugnir
  • 239
  • 5
  • 12