JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/74098
Change subject: Fix position-fixed workaround for older devices in overlays
......................................................................
Fix position-fixed workaround for older devices in overlays
Could be observed in the editor. The bottom bar would stay in the middle
of the page.
Change-Id: I957ddea76d64d406602a4bd80d64316a43bfc6bc
---
M javascripts/common/mf-application.js
M less/common/notifications.less
M stylesheets/common/notifications.css
3 files changed, 14 insertions(+), 11 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/98/74098/1
diff --git a/javascripts/common/mf-application.js
b/javascripts/common/mf-application.js
index a294633..6a385e7 100644
--- a/javascripts/common/mf-application.js
+++ b/javascripts/common/mf-application.js
@@ -100,8 +100,7 @@
var
mode, $body = $( 'body' ),
$doc = $( 'html' ),
- $viewport = $( '#mw-mf-viewport' ),
- $pageCenter = $( '#mw-mf-page-center' );
+ $viewport = $( '#mw-mf-viewport' );
if ( $body.hasClass( 'alpha' ) ) {
mode = 'alpha';
@@ -125,13 +124,11 @@
// special case when we're at the
beginning of the page and many
// browsers (e.g. Android 2.x) return
wrong window height because
// of the URL bar
- $viewport.height( '100%' );
- } else if ( scrollBottom < $pageCenter.height()
) {
- // keep expanding the viewport until
it's as big as main content
- // (prevents possible infinite scroll
in some browsers, can be tested
- // on desktop Chrome forcing
supportsPositionFixed() to return false)
+ $viewport.add( '.mw-mf-overlay'
).height( '100%' );
+ } else {
+ // keep expanding the viewport until
the end of the page reached
// #notification has bottom: 0 and
sticks to the end of the viewport
- $viewport.height( scrollBottom );
+ $viewport.add( '.mw-mf-overlay'
).height( scrollBottom );
}
} );
}
diff --git a/less/common/notifications.less b/less/common/notifications.less
index d658054..1eafbda 100644
--- a/less/common/notifications.less
+++ b/less/common/notifications.less
@@ -41,12 +41,16 @@
* an estimate; it doesn't have to be exact because it's used
only for
* the sliding animation, not for hiding the drawer */
.transform( translate3d(0, 100px, 0) );
+ // counter translate3d with bottom to avoid empty blank space
at the bottom
+ // especially on browsers that don't support position: fixed
+ bottom: 100px;
opacity: 0;
// delay visibility transition to make other transitions visible
// http://fvsch.com/code/transition-fade/test5.html
- .transition( transform @duration, opacity @duration, visibility
0s @duration );
+ .transition( transform @duration, opacity @duration, visibility
0s @duration, bottom 0s @duration );
&.visible {
+ bottom: 0;
.transition( transform @duration, opacity @duration );
visibility: visible;
opacity: 1;
diff --git a/stylesheets/common/notifications.css
b/stylesheets/common/notifications.css
index 535bce5..ea04707 100644
--- a/stylesheets/common/notifications.css
+++ b/stylesheets/common/notifications.css
@@ -39,15 +39,17 @@
-webkit-transform: translate3d(0, 100px, 0);
transform: translate3d(0, 100px, 0);
+ bottom: 100px;
opacity: 0;
-webkit-backface-visibility: hidden;
- -webkit-transition: -webkit-transform 0.25s, opacity 0.25s, visibility 0s
0.25s;
- transition: transform 0.25s, opacity 0.25s, visibility 0s 0.25s;
+ -webkit-transition: -webkit-transform 0.25s, opacity 0.25s, visibility 0s
0.25s, bottom 0s 0.25s;
+ transition: transform 0.25s, opacity 0.25s, visibility 0s 0.25s, bottom 0s
0.25s;
}
.animations .beta #mf-notification.visible,
.animations .alpha #mf-notification.visible,
.animations .beta .drawer.visible,
.animations .alpha .drawer.visible {
+ bottom: 0;
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
transition: transform 0.25s, opacity 0.25s;
--
To view, visit https://gerrit.wikimedia.org/r/74098
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I957ddea76d64d406602a4bd80d64316a43bfc6bc
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
