Catrope has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/141081

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(-)


  git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/81/141081/1

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: newchange
Gerrit-Change-Id: I73049c045c8d7f83898e1d4309b7edb148273e81
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Catrope <[email protected]>

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

Reply via email to