Last modified: 2014-09-30 23:02:45 UTC
Created attachment 15324 [details] Screenshot It looks like PopupToolgroup isn't taking the widths of the tool labels into account quite correctly. This seems to be causing the horizontal scrollbar in the attached screenshot. Also note that when you hover over "Special characters", the box that appears on hover doesn't contain all of the text and ends about halfway through the 'e'.
This only happens when the vertical scrollbar is needed to display all items.
It also doesn't happen on IE 11. Opera latest, Firefox latest and Opera 12 all exhibit the issue. I can't tell if this is a very wide-spread browser bug (with IE being the only browser to get this right), or counter-intuitive yet correct according to the specification behavior that IE implements differently. Either way we'll probably want to file at least one upstream bug ;) Basically, the PopupToolGroup in the toolbar has no explicit width set. When we apply explicit height and overflow-y: auto (via ClippableElement), the browser needs to render a scrollbar. The expected behavior would be to extend the element's width by the width of scrollbar. Browsers (except IE) instead keep the width and insert the vertical scrollbar inside, which causes them to also need to insert horizontal scrollbar. Changing 'overflow-y: auto' to 'scroll' fixes the issue in all browsers.
Created attachment 16621 [details] IE11 screenshots
Change 163586 had a related patch set uploaded by Bartosz Dziewoński: ClippableElement: Use 'overflow-[xy]: scroll' rather than 'auto' https://gerrit.wikimedia.org/r/163586
JSFiddle: http://jsfiddle.net/hxyxvqy0/
(As a curiosity, Opera 12 only exhibits the issue only if the dropdown contains block elements that contain inline-block elements. Not that anyone cares ;) )
Change 163586 merged by jenkins-bot: ClippableElement: Use 'overflow-[xy]: scroll' rather than 'auto' https://gerrit.wikimedia.org/r/163586
