Issue number: resolves #29211

What is the current behavior?

In #28861 I fixed a bug that caused .popover-viewport to have overflow: hidden. In reality, this code should have always applied but due to an incorrect selector it never did.

As it turns out in #29211, some developers were relying on the broken behavior to build their applications. In particular, developers were using ion-popover without an ion-content. The linked change made it so that using popovers without ion-content were not scrollable.

After talking with @mapsandapps we think it makes sense to officially support this behavior. We support using modals without ion-content, and we could not think of a reason to not support the same use case for popover.

What is the new behavior?

If the .popover-viewport element has a child content then .popover-viewport will not be scrollable.
If the .popover-viewport element does not have a child content then .popover-viewport will be scrollable.

I implemented this behavior using progressive enhancement via :has. The :has pseudo-class has cross-browser support. Ionic v7 supports some versions of browsers that do not have :has support. As a result, we fall back to the existing behavior in this environment. Developers are able to get this behavior on older browsers by explicitly setting overflow: auto on .popover-viewport.

Fortunately, we will be dropping support for several of the older browsers versions in Ionic v8, so the need to do the manual opt-in should be less frequent as time goes on.

Does this introduce a breaking change?

Other information

Dev build: 7.8.2-dev.11711383079.118d48a5

Testing:

Open https://codepen.io/liamdebeasi/pen/JjVJrZQ?editors=1100 (this has a dev build installed)
Click each button to open a popover.
Verify that each popover can be scrolled.

I could not find a great way to automate this test, but let me know if anyone has ideas!