1324232 - <input type="range"> broken on Linux (invisible or missing controls)

Status: RESOLVED DUPLICATE of bug 1335705

(Core :: Widget: Gtk, defect, P2)

Description

[Ori Avtalion (salty-horse)]

On Linux, the "range" control is rendered incorrectly.
I know of several different glitches, which might depend on the GUI used (Gnome, KDE):
* Bar is drawn but there's no handle (confirmed on one GNOME system)
* Handle is drawn but there's no bar
* The entire control is invisible (confirmed on one KDE system)

test-case:
data:text/html,<input type=range>

I have tested with Nightly and 50.1 on Gnome.

Comment 1

[buovjaga]

Attachment: Screenshot of the problem

Confirmed.
FF 50.0.2 on Arch Linux 64-bit with KDE.

Comment 2

[Ori Avtalion (salty-horse)]

See also: Bug 1278108

Comment 3

[Eevee (Evelyn Woods) [:eevee]]

Completely invisible on 50 is the fault of bug 1278108, which is apparently the fault of GTK 3.20 and "fixed" in 51.

However, even on current nightly, I see a slider (handle) with no trough (bar).  I'm using KDE's Breeze port (https://cgit.kde.org/breeze-gtk.git/), and if I switch to Adwaita, I do see a trough.  I think the problem, at least for me, is as follows.

Firefox determines the height of the trough by subtracting the margins of the 'trough' element from the min-height of the 'scale' element.  For Adwaita, this works fine, because it does:

scale {
  min-height: 10px;
}

The trough has no margins, so the result is a 10px-tall bar, centered behind a 18px-tall handle.  No problem.

However, Breeze does this:

scale trough {
  min-height: 6px;
  margin: 9px;
}

It sets no height on the scale element at all, relying on the size of the trough to implicitly force a minimum size on its container.  Firefox just sees that the scale has no min-height and the trough has 9px margins, so it subtracts and gets a -9px tall trough.

A workaround for Breeze is to put this in ~/.config/gtk-3.0/gtk.css:

scale {
    min-height: 24px;
}

6px + 2 * 9px == 24px, so Firefox will work backwards and arrive at the correct value of 6px as the height of the trough.

The real fix is just to investigate the GTK element hierarchy in more detail, I guess?  I don't know much about the GTK3 API, but they must've done something pretty wrong if a /web browser/ has such a hard time talking to their /CSS-powered/ engine.

Alas, even if this is fixed right now, it won't be released until Firefox 54, making eight straight releases that an HTML5 element has been broken.  :(

Comment 4

[Karl Tomlinson (:karlt)]

Thank you for the analysis in comment 3.  That sounds related to bug 1278108 comment 24.

The issue of visible trough/bar but no handle/slider is also still present in Nightly and reproduces with GTK 3.20 and Ambiance from light-themes_16.10+16.10.20161007-0ubuntu1_all.deb

Comment 5

[Karl Tomlinson (:karlt)]

Progress in bug 1335705.