Since yesterday, I have been experiencing issues with the buttons on my page.
chrome : Version 61.0.3163.100 (Build officiel) (64 bits)
I do not encounter any problems with Firefox.
The problem arises when I select text on my overlay; the overlay becomes transparent and reveals the map behind it, resulting in dirty pixels and gray squares appearing over the div as well.
If you would like to test it live, visit (you can enter dummy registration, it's local).
I am using Leaflet and a div overlay:
https://i.sstatic.net/5bO7B.png https://i.sstatic.net/mpsP1.png
Code:
<div class="cdk-overlay-container">
<div class="cdk-global-overlay-wrapper" style="justify-content: center; align-items: center;">
<div class="cdk-overlay-backdrop cdk-overlay-dark-backdrop cdk-overlay-backdrop-showing"/>
<div id="cdk-overlay-30" class="cdk-overlay-pane" dir="ltr" style="position: static; pointer-events: auto; width: 350px;">
<div tabindex="0" class="cdk-visually-hidden cdk-focus-trap-anchor"/>
<md-dialog-container class="mat-dialog-container ng-tns-c6-30 ng-trigger ng-trigger-slideDialog" tabindex="-1" role="dialog" aria-labelledby="md-dialog-title-7" style="transform: none; opacity: 1;">
<!---->
<app-dialog-choose-layers>
<h2 class="mat-dialog-title" md-dialog-title="" id="md-dialog-title-7">Opacity of Maps</h2>
<div class="mat-dialog-content" md-dialog-content="" style="
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
">
<table width="100%">
<tbody>
<!---->
<tr class="">
<td>ign plan</td>
<td>
...
</td>
</tr>
<tr class="">
...
</td>
</tr>
<tr class="">
...
</td>
</tr>
</tbody>
</table>
</div>
<div class="mat-dialog-actions" md-dialog-actions="">
<button class="mat-button" md-button="" tabindex="-1">
<span class="mat-button-wrapper">Ok</span>
<div class="mat-button-ripple mat-ripple" md-ripple=""/>
<div class="mat-button-focus-overlay"/>
</button>
</div>
</app-dialog-choose-layers>
</md-dialog-container>
<div tabindex="0" class="cdk-visually-hidden cdk-focus-trap-anchor"/>
</div>
</div>
</div>