Open NeluQi opened 1 year ago
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.
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
@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
Could you provide a Github repo we can use to reproduce the issue?
@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
@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;
}
Prerequisites
Ionic Framework Version
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