javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(backdrop): blocks scrolling in standalone

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-02-22 22:39:28 +01:00
parent 5932561baa
commit 8b50faa131
8 changed files with 71 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/src/components/action-sheet/action-sheet.scss
View File

@ -6,7 +6,7 @@
ion-action-sheet { ion-action-sheet {
@include position(0, null, null, 0); @include position(0, null, null, 0);
position: absolute; position: fixed;
z-index: $z-index-overlay; z-index: $z-index-overlay;
display: block; display: block;

4
packages/core/src/components/alert/alert.scss
View File

@ -6,7 +6,7 @@
ion-alert { ion-alert {
@include position(0, 0, 0, 0); @include position(0, 0, 0, 0);
position: absolute; position: fixed;
z-index: $z-index-overlay; z-index: $z-index-overlay;
@ -61,6 +61,8 @@ ion-alert.alert-top {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
overflow-y: scroll; overflow-y: scroll;
overscroll-behavior-y: contain;
} }
.alert-input { .alert-input {

1
packages/core/src/components/alert/alert.tsx
View File

@ -342,6 +342,7 @@ export class Alert {
const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'alert-translucent') : {}; const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'alert-translucent') : {};
return { return {
role: 'alertdialog',
class: { class: {
...themedClasses, ...themedClasses,
...getClassMap(this.cssClass) ...getClassMap(this.cssClass)

36
packages/core/src/components/alert/test/standalone/index.html
View File

@ -6,6 +6,7 @@
<title>Alert - Standalone</title> <title>Alert - Standalone</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script> <script src="/dist/ionic.js"></script>
</head> </head>
<body> <body>
@ -19,9 +20,44 @@
<button id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button> <button id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
<button onclick="presentWithCssClass()">CssClass</button> <button onclick="presentWithCssClass()">CssClass</button>
<div class="f"></div>
<div class="f"></div>
<div class="f"></div>
<div class="f"></div>
<div class="f"></div>
<div class="f"></div>
<div class="f"></div>
<div class="f"></div>
<div class="f"></div>
<div class="f"></div>
<dialog id="favDialog">
<form method="dialog">
<section>
<p><label for="favAnimal">Favorite animal:</label>
<select id="favAnimal">
<option></option>
<option>Brine shrimp</option>
<option>Red panda</option>
<option>Spider monkey</option>
</select></p>
</section>
<menu>
<button id="cancel" type="reset">Cancel</button>
<button type="submit">Confirm</button>
</menu>
</form>
</dialog>
<ion-alert-controller></ion-alert-controller> <ion-alert-controller></ion-alert-controller>
<style> <style>
.f {
width: 200px;
height: 200px;
background: blue;
margin: 20px auto;
}
body > button { body > button {
display: block; display: block;
clear: both; clear: both;

2
packages/core/src/components/app/app.scss
View File

@ -52,6 +52,8 @@ body {
word-wrap: break-word; word-wrap: break-word;
overscroll-behavior-y: contain;
text-size-adjust: none; text-size-adjust: none;
user-select: none; user-select: none;
} }

4
packages/core/src/components/backdrop/backdrop.scss
View File

@ -29,3 +29,7 @@ ion-backdrop {
cursor: auto; cursor: auto;
} }
} }
body.backdrop-no-scroll {
overflow: hidden;
}

23
packages/core/src/components/backdrop/backdrop.tsx
View File

@ -21,6 +21,14 @@ export class Backdrop {
@Event() ionBackdropTap: EventEmitter; @Event() ionBackdropTap: EventEmitter;
componentDidLoad() {
registerBackdrop(this);
}
componentDidUnload() {
unregisterBackdrop(this);
}
@Listen('touchstart', {passive: false, capture: true}) @Listen('touchstart', {passive: false, capture: true})
protected onTouchStart(ev: TouchEvent) { protected onTouchStart(ev: TouchEvent) {
this.lastClick = now(ev); this.lastClick = now(ev);
@ -53,3 +61,18 @@ export class Backdrop {
}; };
} }
} }
const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
const activeBackdrops = new Set();
function registerBackdrop(backdrop: any) {
activeBackdrops.add(backdrop);
document.body.classList.add(BACKDROP_NO_SCROLL);
}
function unregisterBackdrop(backdrop: any) {
activeBackdrops.delete(backdrop);
if(activeBackdrops.size === 0) {
document.body.classList.remove(BACKDROP_NO_SCROLL);
}
}

2
packages/core/src/components/loading/loading.scss
View File

@ -6,7 +6,7 @@
ion-loading { ion-loading {
@include position(0, 0, 0, 0); @include position(0, 0, 0, 0);
position: absolute; position: fixed;
z-index: $z-index-overlay; z-index: $z-index-overlay;
display: flex; display: flex;