jenkins-bot has submitted this change and it was merged.

Change subject: Work around element sizing bug in Chrome
......................................................................


Work around element sizing bug in Chrome

If you highlighted a div in a clippable container, then scrolled
the page such that the contained clipped and became scrollable
(making the highlight narrower due to the scrollbar), then scrolled
back down such that the container unclipped, the highlight
wouldn't become wider again, and a white gap the size of the
(now-gone) scrollbar would be left behind.

Reported as https://code.google.com/p/chromium/issues/detail?id=387290 .
Work around this by first unsetting the width/height property,
then forcing a reflow, then unsetting the overflow-x/y property.

Change-Id: I73049c045c8d7f83898e1d4309b7edb148273e81
---
M src/elements/ClippableElement.js
1 file changed, 6 insertions(+), 2 deletions(-)

Approvals:
  Trevor Parscal: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/src/elements/ClippableElement.js b/src/elements/ClippableElement.js
index 2864822..15f74d4 100644
--- a/src/elements/ClippableElement.js
+++ b/src/elements/ClippableElement.js
@@ -125,12 +125,16 @@
        if ( clipWidth ) {
                this.$clippable.css( { 'overflow-x': 'auto', 'width': 
desiredWidth } );
        } else {
-               this.$clippable.css( { 'overflow-x': '', 'width': 
this.idealWidth || '' } );
+               this.$clippable.css( 'width', this.idealWidth || '' );
+               this.$clippable.width(); // Force reflow for 
https://code.google.com/p/chromium/issues/detail?id=387290
+               this.$clippable.css( 'overflow-x', '' );
        }
        if ( clipHeight ) {
                this.$clippable.css( { 'overflow-y': 'auto', 'height': 
desiredHeight } );
        } else {
-               this.$clippable.css( { 'overflow-y': '', 'height': 
this.idealHeight || '' } );
+               this.$clippable.css( 'height', this.idealHeight || '' );
+               this.$clippable.height(); // Force reflow for 
https://code.google.com/p/chromium/issues/detail?id=387290
+               this.$clippable.css( 'overflow-y', '' );
        }
 
        this.clipped = clipWidth || clipHeight;

-- 
To view, visit https://gerrit.wikimedia.org/r/141081
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: I73049c045c8d7f83898e1d4309b7edb148273e81
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Catrope <[email protected]>
Gerrit-Reviewer: Trevor Parscal <[email protected]>
Gerrit-Reviewer: jenkins-bot <>

_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to