jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/382230 )
Change subject: mediawiki.notification: Move offset() computation to next frame
......................................................................
mediawiki.notification: Move offset() computation to next frame
Crrently on all page views in WMF production, the $.ready handler
is inserting the notif $area and subsequently doing a forced
style calculation due to getBoundingClientRect() from offset().
Move this to an animation frame instead and re-order the statements
so that DOM reads go before DOM writes.
Change-Id: I7c6201dc8d4e3227e01b75e853b6e4dc9a734031
---
M resources/src/mediawiki/mediawiki.notification.js
1 file changed, 21 insertions(+), 11 deletions(-)
Approvals:
jenkins-bot: Verified
Jforrester: Looks good to me, approved
diff --git a/resources/src/mediawiki/mediawiki.notification.js
b/resources/src/mediawiki/mediawiki.notification.js
index d5289bd..20f8b8d 100644
--- a/resources/src/mediawiki/mediawiki.notification.js
+++ b/resources/src/mediawiki/mediawiki.notification.js
@@ -280,6 +280,7 @@
.toggleClass( 'mw-notification-area-layout',
!isFloating );
}
+ // Write to the DOM:
// Prepend the notification area to the content area and save
its object.
$area = $( '<div id="mw-notification-area"
class="mw-notification-area mw-notification-area-layout"></div>' )
// Pause auto-hide timers when the mouse is in the
notification area.
@@ -301,20 +302,29 @@
} );
mw.util.$content.prepend( $area );
- offset = $area.offset();
- $area.css( 'display', 'none' );
- $( window ).on( 'scroll', updateAreaMode );
+ // Read from the DOM:
+ // Must be in the next frame to avoid synchronous layout
+ // computation from offset()/getBoundingClientRect().
+ rAF( function () {
+ offset = $area.offset();
- // Initial mode
- updateAreaMode();
+ // Initial mode (reads, and then maybe writes)
+ updateAreaMode();
- // Handle pre-ready queue.
- isPageReady = true;
- while ( preReadyNotifQueue.length ) {
- notif = preReadyNotifQueue.shift();
- notif.start();
- }
+ // Once we have the offset for where it would normally
render, set the
+ // initial state of the (currently empty) notification
area to be hidden.
+ $area.css( 'display', 'none' );
+
+ $( window ).on( 'scroll', updateAreaMode );
+
+ // Handle pre-ready queue.
+ isPageReady = true;
+ while ( preReadyNotifQueue.length ) {
+ notif = preReadyNotifQueue.shift();
+ notif.start();
+ }
+ } );
}
/**
--
To view, visit https://gerrit.wikimedia.org/r/382230
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I7c6201dc8d4e3227e01b75e853b6e4dc9a734031
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Krinkle <[email protected]>
Gerrit-Reviewer: Daniel Friesen <[email protected]>
Gerrit-Reviewer: Jack Phoenix <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: Krinkle <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
