Page MenuHomePhabricator

OOUI InputWidget's input element doesn't align with button when font size is changed
Open, MediumPublic

Assigned To
Authored By
Apr 21 2021, 1:29 PM
Referenced Files
F34449983: image.png
May 11 2021, 7:28 AM
F34449985: image.png
May 11 2021, 7:28 AM
F34449978: image.png
May 11 2021, 7:28 AM
F34410627: unknown.png
Apr 22 2021, 12:34 PM
F34410617: unknown (1).png
Apr 22 2021, 12:34 PM


Steps to reproduce:

  1. Set browser's font size other than the common setting (1em = 16px).
  2. Open this page, you'll find the two elements below 'Preview page with this template' not align.

There's a related discussion on zhwiki. After the height CSS rule on the input element removed, the problem can be solved.

Event Timeline

As a discusser of this problem on zhwiki, I'd like to provide more information:
First, the problem is not only related to ActionFieldLayout, ButtonGroupWidget (with a non-label icon-only button and a button with label inside) is also affected.
Second, the problems always exist on zhwiki (without changing browser's font size). There's a default gadget enlarging the article area's font size in zhwiki (link here), which is considered the cause of the problem.
Third, here're two photos describing the problem before and after disabling the gadget.

unknown.png (548×2 px, 87 KB)
unknown (1).png (543×2 px, 78 KB)

IMO, though the problem is caused by the gadget, it should be fixed on OOUI side.
Why changing a widget's font size will break up its alignment? I think it's not the expected behavior.

Volker_E added subscribers: Shizhao, Volker_E.

I've realized this a while ago. It is an issue that doesn't only affect Chinese sites.
Chrome seems to have changed an internal calculation on em resulting in 33px/34px equivalent sizes instead of the aimed for 32px.

image.png (156×902 px, 16 KB)

In comparison, Firefox and Edge (macOS):

image.png (144×874 px, 14 KB)
image.png (280×362 px, 16 KB)

@Lt2818 @Tranve @Shizhao Could you verify that you're experiencing this in Chrome only too?

@Volker_E This bug is not related to any specific browser, since we shouldn't assume the size of em. I'm using Firefox.