diff --git a/packages/core/src/components/action-sheet/action-sheet.scss b/packages/core/src/components/action-sheet/action-sheet.scss index 75c8f47eaa..d21b3f9bb1 100644 --- a/packages/core/src/components/action-sheet/action-sheet.scss +++ b/packages/core/src/components/action-sheet/action-sheet.scss @@ -6,7 +6,7 @@ ion-action-sheet { @include position(0, null, null, 0); - position: absolute; + position: fixed; z-index: $z-index-overlay; display: block; diff --git a/packages/core/src/components/alert/alert.scss b/packages/core/src/components/alert/alert.scss index 3f78f064b9..ffcc8398ff 100644 --- a/packages/core/src/components/alert/alert.scss +++ b/packages/core/src/components/alert/alert.scss @@ -6,7 +6,7 @@ ion-alert { @include position(0, 0, 0, 0); - position: absolute; + position: fixed; z-index: $z-index-overlay; @@ -61,6 +61,8 @@ ion-alert.alert-top { -webkit-overflow-scrolling: touch; overflow-y: scroll; + + overscroll-behavior-y: contain; } .alert-input { diff --git a/packages/core/src/components/alert/alert.tsx b/packages/core/src/components/alert/alert.tsx index 5b6e4c3bda..131a93f0cc 100644 --- a/packages/core/src/components/alert/alert.tsx +++ b/packages/core/src/components/alert/alert.tsx @@ -342,6 +342,7 @@ export class Alert { const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'alert-translucent') : {}; return { + role: 'alertdialog', class: { ...themedClasses, ...getClassMap(this.cssClass) diff --git a/packages/core/src/components/alert/test/standalone/index.html b/packages/core/src/components/alert/test/standalone/index.html index 8974cb9433..16930dbf75 100644 --- a/packages/core/src/components/alert/test/standalone/index.html +++ b/packages/core/src/components/alert/test/standalone/index.html @@ -6,6 +6,7 @@ Alert - Standalone + @@ -19,9 +20,44 @@ +
+
+
+
+
+
+
+
+
+
+ + +
+
+

+

+
+ + + + +
+