模态关闭后文本模糊

Question

嗨，我的模态有问题，当我从这个模型打开另一个模型并关闭它时，第一个模态文本模糊。

打开第二个模式之前

关闭第二个模式后

我的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>

Answer 1

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

如果我是正确的，将以下代码添加到您的 table 和模态应该可以解决它。如果这不起作用，请尝试将其也添加到 body。到处乱逛！

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

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

Answer 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;
}

我的问题已经解决

模态关闭后文本模糊

Blurry text after modal closing

html

css

primeng

angular