Page MenuHomePhabricator

Using <section> prevents from inheriting CSS
Closed, ResolvedPublic

Description

In includes/templates/Usercreate.php, there is a part that reads:

<section class="mw-form-header">
<?php $this->html( 'header' ); ?>
</section>

For some reason, the content put between the <section></section> tags does not inherit the CSS from its parents, with ugly consequences. For instance, when the ConfirmEdit extension is activated, and QuestyCaptcha is used, an input field is inserted between the <section></section> tags, which doesn't inherit CSS and thus looks different from the rest of the fields.

I've seen this bug in Chrome 33, Firefox 25 and Safari 6 (screens attached). This bug is probably not due to MediaWiki, but a short Google search didn't suggest that it's a browser issue either.

So anyway, rather than complicating ourselves too much, I suggest to simply change the section tags for divs.

Here is the Gerrit patch: https://gerrit.wikimedia.org/r/#/c/121291/


Version: 1.23.0
Severity: normal

Details

Reference
bz63233

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 2:54 AM
bzimport set Reference to bz63233.

Screen of the bug in Chrome 31

Attached:

Chrome_31.png (717×1 px, 164 KB)

Screen of the bug in Firefox 25

Attached:

Firefox_25.png (725×1 px, 169 KB)

Screen of the bug in Safari 6

Attached:

Safari_6.png (702×1 px, 157 KB)

Can you link me to somewhere with this set up, so I can test?

I don't see how using 'section' would cause issues, my guess would be that this is caused by something else, or maybe overly specific CSS somewhere.

Note also that FancyCaptcha is currently special-cased in core and is the only one that looks somewhat nice.

Change 121842 had a related patch set uploaded by Bartosz Dziewoński:
mediawiki.ui: Do not depend on divs being present inside .mw-ui-vform

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

This is actually caused by some silly CSS in mediawiki.ui.

Do you know which one? When I first found the problem, I tried fixing it by altering the CSS via the console, but after a while of failing I got tired and went for the other approach.

Change 121842 merged by jenkins-bot:
mediawiki.ui: Do not depend on divs being present inside .mw-ui-vform

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