鉻問題按鈕懸停和小葉

Question

從昨天開始，我遇到的問題與使用

鉻我的網頁按鈕：版本61.0.3163.100（建設OFFICIEL）（64位）

我做沒有遇到任何問題與火狐

當我選擇我的覆蓋文本，覆蓋變得透明，我可以看到它後面的地圖，最終，我會得到很多髒圖像和灰色的方塊在div上以及。

，如果你想給它一個活的嘗試，http://beta.melard.fr（你可以entrer dumy註冊它的地方）

我使用的傳單和一個div覆蓋：

代碼：

<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">Opacité des cartes</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> 
             <md-slider class="mat-slider mat-accent mat-slider-horizontal" max="1" min="0" role="slider" step="0.01" tabindex="0" aria-disabled="false" aria-valuemax="1" aria-valuemin="0" aria-valuenow="1" aria-orientation="horizontal" style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
              <div class="mat-slider-wrapper"> 
               <div class="mat-slider-track-wrapper"> 
                <div class="mat-slider-track-background" style="transform: translateX(0px) scaleX(0);"/> 
                <div class="mat-slider-track-fill" style="transform: translateX(0px) scaleX(1);"/> 
               </div> 
               <div class="mat-slider-ticks-container" style="transform: translateX(0%);"> 
                <div class="mat-slider-ticks" style="background-size: 0% 2px; transform: translateZ(0px) translateX(0%);"/> 
               </div> 
               <div class="mat-slider-thumb-container" style="transform: translateX(0%);"> 
                <div class="mat-slider-focus-ring"/> 
                <div class="mat-slider-thumb"/> 
                <div class="mat-slider-thumb-label"> 
                 <span class="mat-slider-thumb-label-text">1</span> 
                </div> 
               </div> 
              </div> 
             </md-slider> 
            </td> 
           </tr> 
           <tr class=""> 
            <td>google hybride</td> 
            <td> 
             <md-slider class="mat-slider mat-accent mat-slider-horizontal mat-slider-min-value" max="1" min="0" role="slider" step="0.01" tabindex="0" aria-disabled="false" aria-valuemax="1" aria-valuemin="0" aria-valuenow="0" aria-orientation="horizontal" style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
              <div class="mat-slider-wrapper"> 
               <div class="mat-slider-track-wrapper"> 
                <div class="mat-slider-track-background" style="transform: translateX(7px) scaleX(1);"/> 
                <div class="mat-slider-track-fill" style="transform: translateX(-7px) scaleX(0);"/> 
               </div> 
               <div class="mat-slider-ticks-container" style="transform: translateX(0%);"> 
                <div class="mat-slider-ticks" style="background-size: 0% 2px; transform: translateZ(0px) translateX(0%); padding-left: 7px;"/> 
               </div> 
               <div class="mat-slider-thumb-container" style="transform: translateX(-100%);"> 
                <div class="mat-slider-focus-ring"/> 
                <div class="mat-slider-thumb"/> 
                <div class="mat-slider-thumb-label"> 
                 <span class="mat-slider-thumb-label-text">0</span> 
                </div> 
               </div> 
              </div> 
             </md-slider> 
            </td> 
           </tr> 
           <tr class=""> 
            <td>google sattelite</td> 
            <td> 
             <md-slider class="mat-slider mat-accent mat-slider-horizontal mat-slider-min-value" max="1" min="0" role="slider" step="0.01" tabindex="0" aria-disabled="false" aria-valuemax="1" aria-valuemin="0" aria-valuenow="0" aria-orientation="horizontal" style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
              <div class="mat-slider-wrapper"> 
               <div class="mat-slider-track-wrapper"> 
                <div class="mat-slider-track-background" style="transform: translateX(7px) scaleX(1);"/> 
                <div class="mat-slider-track-fill" style="transform: translateX(-7px) scaleX(0);"/> 
               </div> 
               <div class="mat-slider-ticks-container" style="transform: translateX(0%);"> 
                <div class="mat-slider-ticks" style="background-size: 0% 2px; transform: translateZ(0px) translateX(0%); padding-left: 7px;"/> 
               </div> 
               <div class="mat-slider-thumb-container" style="transform: translateX(-100%);"> 
                <div class="mat-slider-focus-ring"/> 
                <div class="mat-slider-thumb"/> 
                <div class="mat-slider-thumb-label"> 
                 <span class="mat-slider-thumb-label-text">0</span> 
                </div> 
               </div> 
              </div> 
             </md-slider> 
            </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> 

Answer 1

的問題CSS相關的，我添加了一個CSS來我的角度。 io的材料，以便能在這個對話框窗口一個很好的標誌，那breaked CSS外觀鉻

.mat-dialog-container { 
    background-image: url("../assets/pluto-est-sur-une-piste.png"); 
    background-repeat: no-repeat; 
    background-position: bottom right; 
    background-size: 120px; 
} 

去除CSS解決問題