fix(popover): ion-scroll sizing

fixes #14911

core/src/components/content/content.scss

@@ -35,8 +35,6 @@
   contain: layout size style;
 }
 
-
-
 :host(.scroll-disabled),
 ion-scroll {
   @include padding(
@@ -51,3 +49,9 @@ ion-scroll {
 :host(.outer-content) {
   --ion-color-base: #{$background-color-step-50};
 }
+
+:host(.content-size) ion-scroll {
+  position: relative;
+
+  contain: none;
+}

core/src/components/content/content.tsx

@@ -1,7 +1,7 @@
 import { Component, Element, Listen, Method, Prop, QueueApi } from '@stencil/core';
 
 import { Color, Config, Mode } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
+import { createColorClasses, hostContext } from '../../utils/theme';
 
 @Component({
   tag: 'ion-content',
@@ -93,6 +93,7 @@ export class Content {
     return {
       class: {
         ...createColorClasses(this.color),
+        'content-size': hostContext('ion-popover', this.el),
         'scroll-disabled': !this.scrollEnabled,
       }
     };

core/src/components/scroll/scroll.scss

@@ -12,6 +12,8 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   will-change: scroll-position;
+
+  box-sizing: border-box;
 }
 
 :host(.overscroll)::before,

core/src/utils/animations/ios.transition.ts

@@ -47,7 +47,7 @@ export function iosTransitionAnimation(AnimationC: Animation, navEl: HTMLElement
     const enteringContent = new AnimationC();
 
     if (!contentEl && !enteringToolBarEle && headerEls.length === 0) {
-      enteringContent.addElement(enteringEl.querySelector(':scope > ion-page, :scope > ion-nav, :scope > ion-tabs'));
+      enteringContent.addElement(enteringEl.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs'));
     } else {
       enteringContent.addElement(contentEl);
       enteringContent.addElement(headerEls);