| Lt2818 | |
| Apr 21 2021, 1:29 PM |
| 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:
There's a related discussion on zhwiki. After the height CSS rule on the input element removed, the problem can be solved.
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.
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.
I've realized this a while ago. It is an issue that doesn't only affect Chinese sites.
https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#ButtonGroupWidget-destructive-icon-and-progressive-text
Chrome seems to have changed an internal calculation on em resulting in 33px/34px equivalent sizes instead of the aimed for 32px.
In comparison, Firefox and Edge (macOS):
| Firefox | Edge |
 |  |
@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.