jenkins-bot has submitted this change and it was merged.
Change subject: Reduce blurry text effect when animations are enabled on Chrome
......................................................................
Reduce blurry text effect when animations are enabled on Chrome
If you are logged out and there is a hidden CTA drawer present,
article text looks blurry. This commit reduces it.
Change-Id: I9e63a12af40b9c067a19ce5578380523d70071ca
---
M less/common/notifications.less
M stylesheets/common/notifications.css
2 files changed, 10 insertions(+), 5 deletions(-)
Approvals:
Jdlrobson: Verified; Looks good to me, approved
jenkins-bot: Verified
diff --git a/less/common/notifications.less b/less/common/notifications.less
index 3d3ea0f..fe1df0f 100644
--- a/less/common/notifications.less
+++ b/less/common/notifications.less
@@ -25,13 +25,18 @@
#mf-notification,
.drawer {
display: block;
- bottom: -100px;
+ /* we can't determine the actual size of the drawer in CSS, so
this is
+ * an estimate; it doesn't have to be exact because it's used
only for
+ * the sliding animation, not for hiding the drawer */
+ bottom: -11em;
opacity: 0;
.transition( all, .2s );
&.visible {
opacity: 1;
- .transform( translate3d(0, -98px, 0) );
+ /* -0.2em to avoid a weird glitch in some browsers
where the popup moves
+ * slightly when scrolling */
+ .transform( translate3d(0, -10.8em, 0) );
}
}
}
diff --git a/stylesheets/common/notifications.css
b/stylesheets/common/notifications.css
index cd0057c..df5489a 100644
--- a/stylesheets/common/notifications.css
+++ b/stylesheets/common/notifications.css
@@ -20,7 +20,7 @@
.animations #mf-notification,
.animations .drawer {
display: block;
- bottom: -100px;
+ bottom: -11em;
opacity: 0;
-webkit-backface-visibility: hidden;
-webkit-transition-property: all;
@@ -33,8 +33,8 @@
.animations #mf-notification.visible,
.animations .drawer.visible {
opacity: 1;
- -webkit-transform: translate3d(0, -98px, 0);
- transform: translate3d(0, -98px, 0);
+ -webkit-transform: translate3d(0, -10.8em, 0);
+ transform: translate3d(0, -10.8em, 0);
}
#mf-notification {
font-size: 0.9em;
--
To view, visit https://gerrit.wikimedia.org/r/69967
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I9e63a12af40b9c067a19ce5578380523d70071ca
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
