jenkins-bot has submitted this change and it was merged.
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.
It also fixes the overlays on iPhone 3G (the overlay was not covering
the web site below it) and almost fixes the position: fixed fallback on
this phone (it didn't work, now it does, although the bottom bar does not
stick to the bottom, but almost to the bottom).
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(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/javascripts/common/mf-application.js
b/javascripts/common/mf-application.js
index 619351b..b4473d4 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: merged
Gerrit-Change-Id: I957ddea76d64d406602a4bd80d64316a43bfc6bc
Gerrit-PatchSet: 2
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
