Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: Ionic/core iOS Card Modal Blurry

See original GitHub issue

Prerequisites

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

Ionic Framework Version

v4.x
v5.x
v6.x

Current Behavior

When using ion-modal element

<ion-modal is-open="false" id="card-modal">
  <ion-content>Modal Content</ion-content>
</ion-modal>

The modal is very blurry

Expected Behavior

Steps to Reproduce

~~https://cdpn.io/omar2205/debug/wvrWeqK/DqrDdYyagZor~~

https://codepen.io/omar2205/pen/wvrWeqK

Code Reproduction URL

No response

Ionic Info

No response

Additional Information

No response

Issue Analytics

State:
Created 2 years ago
Comments:8 (7 by maintainers)

Top GitHub Comments

1reaction

omar2205commented, Dec 9, 2021

Alright, thanks @liamdebeasi.

1reaction

liamdebeasicommented, Dec 9, 2021

ion-app also receives the .ion-page class when it is initialized, so your querySelector is likely picking that up first.

Top Results From Across the Web

iOS 7 Frosted Glass/Blur Effect Demo - Ionic Forum

Basically, we are blurring not only the top layer, but the content underneath it. Head over the the Demo Page and check it...

@ionic/core | Yarn - Package Manager

Ionic is an open source app development toolkit for building modern, fast, top-quality cross-platform native and Progressive Web Apps from a single codebase ......

5 Examples of the new Ionic 6 Bottom Sheet Modal

We now got a blurry transparent background, a bigger notch and a modal with drop shadow and no borders! Perhaps not the final...

How to Build an Ionic 5 Calendar with Modal & Customisation

To use the calendar, you need to import it into the according page module. If you also want to localisee it for a...

npm - Snyk

... @remobile/react-native-card-list · @remobile/react-native-cordova · @rnhooks/app-state ... angular-ui-router-anim-in-out · angular-ui-router-modal ...