Ionic-framework: bug: chromium issue with translucent popover

[TylerAHolden]

Bug Report

Ionic version:


[ ] 4.x
[x] 5.x

Current behavior:

Popover with the translucent property does not work. You can see behind the popover is not blurred as expected.

Expected behavior:

When the translucent property is set to true, the popover backdrop filter works.

Steps to reproduce:

Open popover in menu. See my example deployment here: https://elegant-hugle-0f5e0e.netlify.app

Related code:
See code here: https://github.com/TylerAHolden/popover-issue-bug-ionic

Other information:

It seems that the parent container "popover-wrapper ion-overlay-wrapper sc-ion-popover-ios" is the reason backdrop filter is not applied. Since the parent is 0x0 pixels set in the middle of the screen, I think that's why backdrop-filter isn't blurring any background.

Ionic info:

Ionic:

   Ionic CLI       : 6.6.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.3.4

Capacitor:

   Capacitor CLI   : 2.4.2
   @capacitor/core : 2.4.2

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.16.2 (/usr/local/bin/node)
   npm    : 6.14.4
   OS     : macOS Catalina

[brandyscarney]

Thanks for the issue! Which browser are you seeing this in? I'm able to reproduce this in Chrome only, but in Safari I see it working fine. Here's an example Codepen: https://codepen.io/brandyscarney/pen/OJXJQNp. Are you seeing the same?

[TylerAHolden]

Yep you're right, safari works fine. I'm using chrome which is where it's not working.

[brandyscarney]

Thanks for the quick reply! I don't think this has ever worked, because Chrome didn't have support for blur when we first implemented it (looks like that was 3 years ago). I'll add this as a bug, but this may be an issue with Chrome's implementation.

[danielehrhardt]

Same Problem here

[danielehrhardt]

    "@ionic/angular": "5.4.1",
    "@ionic/angular": "5.4.4",

After I updated to this Version

[liamdebeasi]

Backdrop filter seems to still work in Chrome, so it looks like something on our end broke: https://codepen.io/liamdebeasi/pen/xxOMwYW Alternatively, it could be that under certain circumstances, Chrome's implementation is now breaking.

[danielehrhardt]

@liamdebeasi it is related to Ionic
https://ionic-5-angular-10-start-template-rjdvwp.stackblitz.io/tabs/tab1

[liamdebeasi]

Backdrop filter seems to still work in Chrome, so it looks like something on our end broke: https://codepen.io/liamdebeasi/pen/xxOMwYW Alternatively, it could be that under certain circumstances, Chrome's implementation is now breaking.

It was the latter. For some reason the arrow and other styles are animating the wrapper is breaking Chrome's backdrop blur implementation.

[danielehrhardt]

@liamdebeasi i also asked my self how this could happen :D
Could you post a Link to the Code Position to take care for other Stuff.

[liamdebeasi]

The issue here is that Chromium has trouble rendering the backdrop filter on an element when animating its parent element. If we were to animate in the content and arrow instead of the wrapper, the problem would go away.

Here is a dev build if anyone would like to try out a potential fix:

Angular

npm install @ionic/[email protected]

React

npm install @ionic/[email protected] @ionic/[email protected]

Vue

npm install @ionic/[email protected] @ionic/[email protected]

Vaniall JS

npm install @ionic/[email protected]

[danielehrhardt]

I tested your Repo. It does work 😍👌.

Does it make sense to create an Issue at the Chromium Project?

[liamdebeasi]

Glad the fix is working!

I already created an issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1148826.