bug: ion-modal handle transformZ results in blurry content on Windows

[NeluQi]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

When using ion-modal in the browser (From PC, windows 10, chrome last), the content is rendered fuzzy, as if in a small screen resolution (not clear text and all elements)

Example content outside of ion-modal

From a mobile device, the display is normal

Expected Behavior

Content stays blurry

Steps to Reproduce

unclear

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.3 Ionic Framework : @ionic/vue 6.3.2

Capacitor:

Capacitor CLI : 4.4.0 @capacitor/android : 4.4.0 @capacitor/core : 4.4.0 @capacitor/ios : 4.4.0

Utility:

cordova-res : 0.15.4 native-run : 1.7.1

System:

NodeJS : v16.15.1 (C:\Program Files\nodejs\node.exe) npm : 8.19.2 OS : Windows 10

Additional Information

No response

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[NeluQi]

I found the reason for this. It was css transform: translateZ(0px) in .modal-handle

I am attaching a video demonstration. When the transform property is turned off, the clarity of the image returns (the video was recorded from the chrome browser).

Blurring is hard to see on the video, but on a real monitor and browser it is very very visible.

fix it

https://user-images.githubusercontent.com/16963395/199266993-ff25a20b-8d1e-43a1-b9bf-b9415cd777c5.mp4

[NeluQi]

@amandaejohnston

ion-modal::part(handle){ transform: none !important; }

Did not solve the problem, everything is exactly blurry.

When stretching the modal window up as much as possible, the blur disappears ( :initial-breakpoint="1")

Please fix it

[averyjohnston]

Could you provide a Github repo we can use to reproduce the issue?

[NeluQi]

@amandaejohnston > Could you provide a Github repo we can use to reproduce the issue?

https://github.com/NeluQi/bug-ionic-modal

In the test project, it is noticeably worse, but the problem still persists

[sean-perkins]

@NeluQi thank you for the reproduction.

I am able to reproduce on Window 10 with the latest Chrome. I also verified that toggling the transformZ on the .modal-handle does cause the display to be clear.

We will track this as a bug.

Edit:

Using the following CSS does workaround the issue, but it must be a global style (not scoped):

ion-modal::part(handle) {
  transform: none !important;
}