1658782 - System controls have too much horizontal padding on gtk, causing issues on websites.

Status: RESOLVED DUPLICATE of bug 1411425

(Core :: Widget: Gtk, defect)

Description

[Hanabishi]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:80.0) Gecko/20100101 Firefox/80.0

Steps to reproduce:

Many of the websites using resized form controls. By default that controls renders with the system style and switches to the fallback when custom styles was applied.
But size changing doesn't counts as "styling" and this leads to broken controls appearance on some platforms, e.g. on Linux. Screenshots will be attached below.

Also I've made an interactive example where you can test: https://hanabishirecca.github.io/controls-example/

Comment 1

[Hanabishi]

Attachment: controls-linux.png

Resized system controls on Linux is broken

Comment 2

[Hanabishi]

Attachment: controls_windows.png

Resized system controls on Windows is ok because of small default size

Comment 3

[Hanabishi]

Attachment: controls-chrome.png

Just for the comparison: WebKit doesn't has this issue at all, regardless of the platform

Comment 4

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Hi,

Thanks for the details. I was able to reproduce on Ubuntu 18.04.3 LTS , on the following versions (chrome works fine, and ff in windows 10 pro works as well)

Latest Nightly 81.0a1 (2020-08-19) (64-bit)
Beta 80.0 (64-bit)
Release 79.0 (64-bit)

I will move this over to a component so developers can take a look over it. If is not the correct component please feel free to change it to an appropriate one.

Thanks for the report.

Best regards, Clara.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

This is specific to your GTK theme (Adwaita, which has huge controls), which Firefox is respecting. Though I agree we should try to behave better here.

Comment 6

[Hanabishi]

I don't think this title is fully describes the problem. Because this is the overall sizing issue and a lot of websites rely on default elements sizes. This can lead to real layout troubles. I think FF should strictly force sizes identical to "styled" ones, as Chrome does.

By the way, I'm not using Adwatia. My system controls look is different. Seems like FF doesn't really respects a system theme here.

Comment 7

[Hanabishi]

Attachment: system-theme.png

Comment 8

[Emilio Cobos Álvarez [:emilio]]

Ah, so you're using a dark theme, and we block it for this precise kind of issue and fall back to adwaita. If you turn on widget.content.allow-gtk-dark-theme you should see the Arc-Dark buttons instead.

Comment 9

[Hanabishi]

Oh, that makes sense now. So if a system theme can deform elements in the such way, change sizes and colors, I definitely think FF should strictly control this behavior and don't rely on any crazy values external theme can provide. Because this can break web layout very roughly.

Comment 10

[Emilio Cobos Álvarez [:emilio]]

Yeah, there are multiple reasons to drop the GTK theming for web content. Compat with websites that make assumptions about form controls is a big one. Also, as we become more multiprocess to mitigate spectre, we start running into X client connection limits (bug 1635451). And also it allows to sandbox web content even more.

The good thing is that given that, there's people working on it, and if you turn on widget.disable-native-theme-for-content, you can get a preview of the cross-platform theme that folks are working on :)

We can look into making the GTK code more resilient to this kind of stuff. Bug 1411425 would make this obsolete anyhow.

Comment 11

[Hanabishi]

Good to hear! The sad thing is, seems like it also breaks the layout. Even worse, it breaks the layout on Windows too 😬

Comment 12

[Emilio Cobos Álvarez [:emilio]]

Can you attach a test-case to the bug where it breaks? (That kind of thing is why it's not on by default yet)

Also, make sure to try it on Nightly, otherwise you won't have bug 1640195 (which made a huge refactoring of it).

Comment 13

[Hanabishi]

Oops, it already looks fine in 81 nightly. Even default background color became white as it should, not inheriting from a system theme.
So I think my bug report is kinda useless now. It turns just to a question "when internal theme will be enabled by default".

Comment 14

[Hanabishi]

Attachment: 80-vs-81-disable-native-theme.png

Comment 15

[Hanabishi]

Well, in FF88 widget.disable-native-theme-for-content option doesn't work anymore.
But as I can see the new theme is now default in current nightly FF89. So I think this report can be closed now.

Comment 16

[Emilio Cobos Álvarez [:emilio]]

Yeah the pref was renamed to widget.non-native-theme.enabled.