크롬 문제 버튼 마우스를 함께 어제부터

Question

를 리플릿, 나는

크롬을 사용하여 내 페이지 버튼을 사용하여 문제가 발생하고있다 : 버전 61.0.3163.100이

내가 (officiel 빌드) (64 비트)

오버레이에서 텍스트를 선택할 때 문제가 발생합니다. 오버레이가 투명 해져서 그 뒤의지도를 볼 수 있습니다. 최종적으로 div 위에 많은 오스 픽셀과 회색 사각형이 표시됩니다. 게다가.

코드 : 당신이 그것을 라이브 시도해하려는 경우

, http://beta.melard.fr는

내가 전단지 및 사업부 오버레이를 사용하고 (당신은 지역의 dumy 등록을 entrer 수) :

<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를 추가했습니다. 내 대화 상자 창에 좋은 로고는 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; 
} 

에 대한 그 breaked CSS의 겉 모양을 얻기 위하여 IO 재료는 문제를 해결