New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bug: ion-modal handle transformZ results in blurry content on Windows #26159
Comments
Thanks for the issue! This issue has been labeled as 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. 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 Untitled.mp4 |
ion-modal::part(handle){ 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 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
The text was updated successfully, but these errors were encountered: