diff --git a/packages/core/src/components/action-sheet/action-sheet.ios.scss b/packages/core/src/components/action-sheet/action-sheet.ios.scss index 2914db8b63..cb20f8738d 100644 --- a/packages/core/src/components/action-sheet/action-sheet.ios.scss +++ b/packages/core/src/components/action-sheet/action-sheet.ios.scss @@ -84,13 +84,15 @@ @include padding($action-sheet-ios-button-padding); - min-height: $action-sheet-ios-button-min-height; + height: $action-sheet-ios-button-height; border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-border-color; font-size: $action-sheet-ios-button-font-size; color: $action-sheet-ios-button-text-color; background: $action-sheet-ios-button-background; + + contain: strict; } .action-sheet-ios .action-sheet-button .action-sheet-icon { diff --git a/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss b/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss index dd6fa5cda8..b5c4592e23 100644 --- a/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss +++ b/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss @@ -82,7 +82,7 @@ $action-sheet-ios-sub-title-padding-bottom: 0 !default; $action-sheet-ios-sub-title-padding-start: $action-sheet-ios-sub-title-padding-end !default; /// @prop - Minimum height of the action sheet button -$action-sheet-ios-button-min-height: 56px !default; +$action-sheet-ios-button-height: 56px !default; /// @prop - Padding of the action sheet button $action-sheet-ios-button-padding: 18px !default; diff --git a/packages/core/src/components/action-sheet/action-sheet.md.scss b/packages/core/src/components/action-sheet/action-sheet.md.scss index 51e9020d0d..c2ced00fac 100644 --- a/packages/core/src/components/action-sheet/action-sheet.md.scss +++ b/packages/core/src/components/action-sheet/action-sheet.md.scss @@ -54,11 +54,13 @@ position: relative; overflow: hidden; - min-height: $action-sheet-md-button-min-height; + height: $action-sheet-md-button-height; font-size: $action-sheet-md-button-font-size; color: $action-sheet-md-button-text-color; background: $action-sheet-md-button-background; + + contain: strict; } .action-sheet-md .action-sheet-button.activated { diff --git a/packages/core/src/components/action-sheet/action-sheet.md.vars.scss b/packages/core/src/components/action-sheet/action-sheet.md.vars.scss index beb8d45416..b27e88c8cc 100644 --- a/packages/core/src/components/action-sheet/action-sheet.md.vars.scss +++ b/packages/core/src/components/action-sheet/action-sheet.md.vars.scss @@ -52,7 +52,7 @@ $action-sheet-md-sub-title-padding-bottom: 0 !default; $action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-title-padding-end !default; /// @prop - Minimum height of the action sheet button -$action-sheet-md-button-min-height: 48px !default; +$action-sheet-md-button-height: 48px !default; /// @prop - Text color of the action sheet button $action-sheet-md-button-text-color: $text-md-color-step-150 !default; diff --git a/packages/core/src/components/action-sheet/test/translucent/index.html b/packages/core/src/components/action-sheet/test/translucent/index.html index 4192f25922..e0cbe1514b 100644 --- a/packages/core/src/components/action-sheet/test/translucent/index.html +++ b/packages/core/src/components/action-sheet/test/translucent/index.html @@ -96,6 +96,7 @@ const actionSheetController = document.querySelector('ion-action-sheet-controller'); await actionSheetController.componentOnReady(); const actionSheetElement = await actionSheetController.create({ + enableBackdropDismiss: false, buttons: [{ text: 'Archive', handler: () => { diff --git a/packages/core/src/components/alert/alert.ios.scss b/packages/core/src/components/alert/alert.ios.scss index 5fb27339de..55eec58de7 100644 --- a/packages/core/src/components/alert/alert.ios.scss +++ b/packages/core/src/components/alert/alert.ios.scss @@ -113,7 +113,9 @@ .alert-ios .alert-tappable { display: flex; - min-height: $alert-ios-tappable-min-height; + height: $alert-ios-tappable-height; + + contain: strict; } @@ -209,6 +211,8 @@ border-style: $alert-ios-checkbox-border-style; border-color: $alert-ios-checkbox-border-color-off; background-color: $alert-ios-checkbox-background-color-off; + + contain: strict; } diff --git a/packages/core/src/components/alert/alert.ios.vars.scss b/packages/core/src/components/alert/alert.ios.vars.scss index 2227edb97a..535e4d7eef 100644 --- a/packages/core/src/components/alert/alert.ios.vars.scss +++ b/packages/core/src/components/alert/alert.ios.vars.scss @@ -290,5 +290,5 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; /// @prop - Filter of the translucent alert $alert-ios-translucent-filter: saturate(180%) blur(20px) !default; -/// @prop - Minimum height of the tappable inputs in the checkbox alert -$alert-ios-tappable-min-height: $item-min-height !default; +/// @prop - Height of the tappable inputs in the checkbox alert +$alert-ios-tappable-height: $item-min-height !default; diff --git a/packages/core/src/components/alert/alert.md.scss b/packages/core/src/components/alert/alert.md.scss index 72e3dee631..faa54231b1 100644 --- a/packages/core/src/components/alert/alert.md.scss +++ b/packages/core/src/components/alert/alert.md.scss @@ -97,7 +97,9 @@ overflow: hidden; - min-height: $alert-md-tappable-min-height; + height: $alert-md-tappable-height; + + contain: strict; } @@ -201,6 +203,8 @@ border-width: $alert-md-checkbox-border-width; border-style: $alert-md-checkbox-border-style; border-color: $alert-md-checkbox-border-color-off; + + contain: strict; } // Material Design Alert Checkbox Checkmark: Checked diff --git a/packages/core/src/components/alert/alert.md.vars.scss b/packages/core/src/components/alert/alert.md.vars.scss index ff469a29fc..55b0aee274 100644 --- a/packages/core/src/components/alert/alert.md.vars.scss +++ b/packages/core/src/components/alert/alert.md.vars.scss @@ -323,5 +323,5 @@ $alert-md-checkbox-icon-border-color: ion-color($colors-md, $alert-md-ch /// @prop - Transform of the icon in the checkbox alert $alert-md-checkbox-icon-transform: rotate(45deg) !default; -/// @prop - Minimum height of the tappable inputs in the checkbox alert -$alert-md-tappable-min-height: $item-min-height !default; +/// @prop - Height of the tappable inputs in the checkbox alert +$alert-md-tappable-height: $item-min-height !default; diff --git a/packages/core/src/components/checkbox/checkbox.ios.scss b/packages/core/src/components/checkbox/checkbox.ios.scss index 20dc3025ea..625f3b08c4 100644 --- a/packages/core/src/components/checkbox/checkbox.ios.scss +++ b/packages/core/src/components/checkbox/checkbox.ios.scss @@ -19,6 +19,8 @@ border-style: $checkbox-ios-icon-border-style; border-color: $checkbox-ios-icon-border-color-off; background-color: $checkbox-ios-background-color-off; + + contain: strict; } diff --git a/packages/core/src/components/checkbox/checkbox.md.scss b/packages/core/src/components/checkbox/checkbox.md.scss index 443fd9f6f8..717c51c348 100644 --- a/packages/core/src/components/checkbox/checkbox.md.scss +++ b/packages/core/src/components/checkbox/checkbox.md.scss @@ -23,6 +23,8 @@ transition-duration: $checkbox-md-transition-duration; transition-property: background; transition-timing-function: $checkbox-md-transition-easing; + + contain: strict; } diff --git a/packages/core/src/components/radio/radio.ios.scss b/packages/core/src/components/radio/radio.ios.scss index 0be38776f3..a6c6a77074 100644 --- a/packages/core/src/components/radio/radio.ios.scss +++ b/packages/core/src/components/radio/radio.ios.scss @@ -13,6 +13,8 @@ width: $radio-ios-icon-width; height: $radio-ios-icon-height; + + contain: strict; } diff --git a/packages/core/src/components/radio/radio.md.scss b/packages/core/src/components/radio/radio.md.scss index 0f4c539a25..a459ab831c 100644 --- a/packages/core/src/components/radio/radio.md.scss +++ b/packages/core/src/components/radio/radio.md.scss @@ -21,6 +21,8 @@ border-width: $radio-md-icon-border-width; border-style: $radio-md-icon-border-style; border-color: $radio-md-color-off; + + contain: layout size style; } diff --git a/packages/core/src/components/searchbar/searchbar.ios.scss b/packages/core/src/components/searchbar/searchbar.ios.scss index c6b9c434a2..2035a11b72 100644 --- a/packages/core/src/components/searchbar/searchbar.ios.scss +++ b/packages/core/src/components/searchbar/searchbar.ios.scss @@ -7,9 +7,17 @@ .searchbar-ios { @include padding($searchbar-ios-padding-top, $searchbar-ios-padding-end, $searchbar-ios-padding-bottom, $searchbar-ios-padding-start); - min-height: $searchbar-ios-min-height; + height: $searchbar-ios-input-height + $searchbar-ios-padding-top + $searchbar-ios-padding-bottom; font-family: $searchbar-ios-font-family; + + contain: strict; +} + +.searchbar-ios .searchbar-input-container { + height: $searchbar-ios-input-height; + + contain: strict; } @@ -39,6 +47,8 @@ background-repeat: no-repeat; background-size: $searchbar-ios-input-search-icon-size; + + contain: strict; } @@ -50,13 +60,15 @@ @include padding(0, 28px); @include border-radius($searchbar-ios-input-border-radius); - height: $searchbar-ios-input-height; + height: 100%; font-size: 14px; font-weight: 400; color: $searchbar-ios-input-text-color; background-color: $searchbar-ios-input-background-color; + + contain: strict; } diff --git a/packages/core/src/components/searchbar/searchbar.ios.vars.scss b/packages/core/src/components/searchbar/searchbar.ios.vars.scss index 4b117d9003..cd6462dc77 100644 --- a/packages/core/src/components/searchbar/searchbar.ios.vars.scss +++ b/packages/core/src/components/searchbar/searchbar.ios.vars.scss @@ -18,9 +18,6 @@ $searchbar-ios-padding-start: $searchbar-ios-padding-end !de /// @prop - Font family of the searchbar $searchbar-ios-font-family: $font-family-ios-base !default; -/// @prop - Minimum height of the searchbar -$searchbar-ios-min-height: 44px !default; - /// @prop - Font size of the searchbar cancel button $searchbar-ios-cancel-button-font-size: 16px !default; diff --git a/packages/core/src/components/tap-click/tap-click.tsx b/packages/core/src/components/tap-click/tap-click.tsx index 711d43aa03..1a559ce71c 100644 --- a/packages/core/src/components/tap-click/tap-click.tsx +++ b/packages/core/src/components/tap-click/tap-click.tsx @@ -21,9 +21,6 @@ export class TapClick { private clearDefers = new WeakMap(); - passive = true; - attachTo = 'document'; - @Prop({context: 'isServer'}) isServer: boolean; @Prop({context: 'enableListener'}) enableListener: EventListenerEnable;