Blurry text after modal closing

Question

HI I have a problem with modal, when I open another model from this one and close it first modal has blurry text.

Before opening second modal

After closing second modal

My css:

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

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

And page code:

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

You can inspect from the browser and check for any div/html layer placed on top of your page which has any css property that is effecting the page layout. — Iqbal Hussain, Nov 27 '19 at 07:24
some reproducible example at [stackblitz](https://stackblitz.com) would be really helpful — StepUp, Nov 27 '19 at 09:04

score 1 · Accepted Answer · answered Nov 27 '19 at 10:15

I think this is a problem to do with composite layers.

If I'm correct, adding the following code to your table and modal should solve it. If that doesn't work, try adding it to the body too. Just hack around!

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

See this answer: https://stackoverflow.com/a/19211952/3412847

score 0 · Answer 2 · answered Nov 28 '19 at 12:04

The problem was caused by PrimeNG generated style: translateX(-50%) translateY(-50%) scale(1).

I add this to styles.scss:

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

And my problem was fixed

Blurry text after modal closing

2 Answers2