Question

从昨天开始，我的页面按钮使用

时遇到问题

chrome：版本61.0.3163.100（Build officiel）（64位）

我没有遇到任何与firefox有关的问题

当我在叠加层上选择文字时，问题出现了，叠加层变得透明，我可以看到它背后的地图，最后，我会在div上获得很多的脏像素和灰色方块。

如果你想试一试，http://beta.melard.fr（你可以在本地注册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有关，我在我的angular.io材料中添加了一个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;
}

删除css解决了问题

铬按钮悬停和传单的问题

1 个答案: