Last modified: 2014-04-19 16:22:55 UTC
If the content area is given an overflow a `{ width: 100%; border: 1px solid black; }` has the effect of creating a block which is always 2px wider than the space that the scrolling area can contain and hence creates a horizontal scrollbar that never disappears. In various places we use width: 100%; and give something a border. We should fix these places by either eliminating the width: 100%; (if it's unnecessary for that area to have it), or by specifying a box-sizing: border-box; on that element (with all the fallbacks) so that the width is calculated correctly in supporting browsers. Note that this issue does not happen with tables, so we don't need to deal with all those people put inside of WikiText. Just ui css we add.
Fixed for the WikiEditor in https://bugzilla.wikimedia.org/40610
I have made an attempt to solve this Gerrit change #54896
https://gerrit.wikimedia.org/r/54896 (Gerrit Change Iee535a5359c03c52f6b72a95807258caf7ba60ae) | Patch Set 1: I wanted to add box-sizing to textarea before. But I believe someone brought up some things that would be messed up by that change. And I'm not sure what the value of it on bodyContent is. [by Daniel Friesen]
Related URL: https://gerrit.wikimedia.org/r/54896 (Gerrit Patch-Set: Iee535a5359c03c52f6b72a95807258caf7ba60ae/2)
https://gerrit.wikimedia.org/r/54896 (Gerrit Change Iee535a5359c03c52f6b72a95807258caf7ba60ae) | Code-Review: Verified:+1 Patch Set 2: Verified+1 Build successful - https://integration.wikimedia.org/ci/job/mediawiki-core-merge/9487/console : SUCCESS - https://integration.wikimedia.org/ci/job/mediawiki-core-whitespaces/3098/console : SUCCESS (non-voting) - https://integration.wikimedia.org/ci/job/mediawiki-core-phpcs-HEAD/5575/console : SUCCESS (non-voting) - https://integration.wikimedia.org/ci/job/mediawiki-core-jslint/4363/checkstyleResult/ : SUCCESS - https://integration.wikimedia.org/ci/job/mediawiki-core-lint/11336/console : SUCCESS [by jenkins-bot]
> In various places we use width: 100%; and give something a border. We should > fix these places by either eliminating the width: 100%; (if it's unnecessary > for that area to have it), or by specifying a box-sizing: border-box; on that > element (with all the fallbacks) so that the width is calculated correctly in > supporting browsers. Do Rahul's changes fix all the "various places"? Would it be helpful to list point to each place the issue exists so we can 'check off' what's done and make it more obvious as to when this report can be closed?
(In reply to comment #6) > > In various places we use width: 100%; and give something a border. We should > > fix these places by either eliminating the width: 100%; (if it's unnecessary > > for that area to have it), or by specifying a box-sizing: border-box; on that > > element (with all the fallbacks) so that the width is calculated correctly in > > supporting browsers. > > Do Rahul's changes fix all the "various places"? Would it be helpful to list > point to each place the issue exists so we can 'check off' what's done and > make > it more obvious as to when this report can be closed? Rahul's change would fix the ones related to textareas but it's almost overly broad and would create visual defects in random places we're not expecting. Such as site scripts that we can't possibly find all of and test. For example: # Go to https://pl.wikipedia.org/wiki/Pies_domowy # Click on "Zgłoś błąd" in the sidebar # Then click on "Przejdź do formularza" See the textarea there (the big field in the middle) nice and flush with the rest of the form. Try modifying the global textarea to use a border-box box-sizing like that changeset does. But besides that. This isn't only a matter of textareas. Other elements can also be given 100% width and borders. Like tables, and more. So even that change won't guarantee the bug is fixed. And these can be all over the place. In core, in special pages and forms we don't use often, extensions, new features we haven't written yet. Honestly this is almost more like one of our tracking bugs, cause to actually fix this we're going to have to find and fix these in unknown places all over.
Patch still needs review...
(In reply to Daniel Friesen from comment #7) > For example: > # Go to https://pl.wikipedia.org/wiki/Pies_domowy > # Click on "Zgłoś błąd" in the sidebar > # Then click on "Przejdź do formularza" This should be fixed in https://pl.wikipedia.org/wiki/MediaWiki:Gadget-wikibugs.css .reportBugDialog input.text, .reportBugDialog textarea { margin-bottom: 12px; width: 95%; padding: .4em; } can replaced by .reportBugDialog input.text, .reportBugDialog textarea { margin-bottom: 12px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: .4em; } Since https://gerrit.wikimedia.org/r/105207 textarea has width: 100%; box-sizing: border-box; but input needs width: 100%; box-sizing: border-box;
#bodyContent { width: 100%; } is removed in https://gerrit.wikimedia.org/r/120528. Is this bug fixed?
Change 54896 abandoned by TheDJ: (Bug 34557) Fixed uses of width: 100%; with borders Reason: This was eventually dealt with in the patch sets identified in the comments. https://gerrit.wikimedia.org/r/54896
Let's close this one. I'm sure we will have a few more spots with this, but if and when we identify them, we should probably file separate tickets for those issues.
