模态关闭后文本模糊答案

【问题标题】：Blurry text after modal closing模态关闭后文本模糊
【发布时间】：2020-03-22 16:41:41
【问题描述】：

您好，我遇到了模态问题，当我从该模型打开另一个模型并关闭它时，第一个模态文本模糊。

在打开第二个模态之前

关闭第二个模态后

我的 CSS：

.label {
    background-color: lightgrey;
    font-weight: bold;
}

td {
    padding: 10px;
    font-size: 14px;
    border: 1px solid black;
}

及页面代码：

<ng-container *ngIf="event">
    <h3>Просмотр события от {{ event.systemDate | dateTime }}</h3>
    <table>
        <tr>
            <td class="label">
                Дата и время события по часовому поясу организации
            </td>
            <td>
                {{ event.systemDate | dateTime }}
            </td>
            <td class="label">
                Дата и время события по часовому поясу Системы
            </td>
            <td>
                {{ event.systemDate | dateTime }}
            </td>
            <td class="label">
                Кем инициировано
            </td>
            <td>
                {{ event.initiatedBy | initiatorType }}
            </td>
        </tr>
    </table>
</ng-container>

【问题讨论】：

您可以从浏览器中检查并检查放置在页面顶部的任何 div/html 图层是否具有影响页面布局的任何 css 属性。
您能否再添加一些您已经完成的工作代码？
是的，我添加了html代码。
stackblitz 上的一些可重现的例子真的很有帮助

标签： html css angular primeng

【解决方案1】：

我认为这是复合层的问题。

如果我是正确的，将以下代码添加到您的表格和模式应该可以解决它。如果这不起作用，请尝试将其也添加到正文中。随便玩玩吧！

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);

看到这个答案：https://stackoverflow.com/a/19211952/3412847

【讨论】：

【解决方案2】：

问题是由 PrimeNG 生成的样式引起的：translateX(-50%) translateY(-50%) scale(1)。

我将它添加到 styles.scss：

.ui-dialog.ui-dynamicdialog {
    margin-top: -20%;
    margin-left: -40%;
    transform: translateZ(0) scale(1.0, 1.0); !important;
}

我的问题已经解决了

【讨论】：