Mixxx Preferences: Sliders have transparency

[foss-]

Bug Description

Open Mixxx Preferences > Waveformsand look at sliders while moving preferences window around. This effects all panels using a sliders so Vinyl Control, Mixer and other panels are affected just the same.

Currently

The slider dots all have opacity.

Expected

Seems unexpected. Preferences should not apply opacity.

Version

Mixxx 2.4-alpha-1508-gb763121761 (HEAD)

OS

macOS 13.4

In this example you can see the waveform through the first slider knob.

[ronso0]

So, does this occur only if you move the Pref window?
Is the theme applied to the Pref windows (and other Mixxx windows) your OS theme?
The slider handles seem chooped at the top, no?

[foss-]

So, does this occur only if you move the Pref window?

No the transparency is there permanently. It does not change or is on / off.

Is the theme applied to the Pref windows (and other Mixxx windows) your OS theme?

Good question. Not aware of a macOS setting that would allow for trasparency only in a single UI element. Tested System Settings > Accessibility > Display > Reduce trasparence but enabling that option does not change anything in regards to the slider knob transparency.

The slider handles seem chooped at the top, no?

Yes, that is another problem that has been going on for a long time. Can't say when this started or if that was always the case, but it is not a new problem.

[ronso0]

The slider handles seem chooped at the top, no?

Yes, that is another problem that has been going on for a long time. Can't say when this started or if that was always the case, but it is not a new problem.

Do you have any other app preferences with sliders to compare and check whether that is a Mixxx/Qt issue or not?

[foss-]

This is music app from Apple. Iirc that is written in swift.

OpenShot Video Editor would be another Qt app for macOS, but I was unable to find a slider UI element in my brief search.

Found a slider in Shotcut, but that looks very different. It certainly is not transparent or chopped off at the top, then again, it is not round:

[m0dB]

I also noticed this, and the fact that the handles are cut off at the top. I will investigate this a bit.

[m0dB]

And also the groove is not vertically centred in relation to the label and spinbox. So it looks like on macOS the slider is higher than the space we give it.

I tried setting a stylesheet and that solves all issues. In the screenshot I changed only the framerate slider:

frameRateSlider->setStyleSheet("QSlider::handle:horizontal {background-color: #aaa; border-radius: 8px; width: 16px; margin: -6px;} QSlider::groove:horizontal { background: #444; height: 4px; border-radius: 2px; margin-left: 6px; margin-right: 6px; }");

If you agree that this is a good fix (and I don't see another way to change the slider without subclassing it, which seems overkill), I can tweak this style a bit more (and than we can decide if we want to apply that for all platforms or just macOS).

[ronso0]

I don't think we should work around (aesthetic, minor) Qt glitches with custom stylesheets, even if they're #ifdef'ed for macos (which they should be, otherwise we'd break most other OS/Qt themes).
(maybe related to https://bugreports.qt.io/browse/QTBUG-98093 ? should be fixed in Qt 6.2.3)

Could someone check how it looks like with Qt6?

[m0dB]

I disagree. It looks really ugly and unprofessional and a stylesheet is a very simple and non-invasive solution and it fixes 3 issues at once (transparency, vertical alignment of groove, cut-off handle).

Also note that in the case of macOS, the default QSlider style seems to imitate some old macOS look. The current macOS sliders look different. I have created a stylesheet that imitates the current look. See screenshots for comparison with the system sound preferences dialog.

PR created: https://github.com/m0dB/mixxx/pull/new/issue-11604-prefs-slider-style

[ronso0]

To clarify:

• how does it look like with Qt6?
• how does it look like in bright mode (and with other relevant GUI/theme options?)
• how do you intend to cover all mac themes? i.e. maintain usability, already your and @foss-'s screenshot look different
• why is it broken in the first place?

[m0dB]

To clarify:

• how does it look like with Qt6?

Exactly like Qt5 with the same issues (transparency, vertical alignment, handle cut off at the top)

• how does it look like in bright mode

(and with other relevant GUI/theme options?)

• how do you intend to cover all mac themes?

There is no such thing as themes on macOS. The only things you can adjust from the appearance is light/dark and "highlight color".

i.e. maintain usability, already your and @foss-'s screenshot look different

@foss- screenshots do not show the standard macOS slider as used in there system preference and system utilities.

• why is it broken in the first place?

1. Because Qt isn't using the macOS UI elements (like for example wxWidgets) but imitates their look, and not always very well.
2. Because mixxx's preferences dialog uses a row height that is too small for the default QSlider style on macOS.
3. No idea what causes the transparency issue.

But honestly I am a bit surprised that this is getting so much push back. The issue is reported, I provide a fix, and I think it's a very reasonable fix :-/

[foss-]

Kudos to addressing those issues. Maybe there was a misunderstanding? My screenshot illustrated the issue with transparent and cut-off sliders. @m0dB 's screenshot illustrated the fix. The fact that they differ would thus be intended and expected.

I like the idea to adapt macOS UI elements to Mixxx preferences a lot. The preferences look a lot more native with the new sliders.

Filed a related feature request to rename Preferences to Settings on macOS: #11642

What about the mentioned fix in Qt https://bugreports.qt.io/browse/QTBUG-98093 in 6.2.3 though?

[m0dB]

What about the mentioned fix in Qt https://bugreports.qt.io/browse/QTBUG-98093 in 6.2.3 though?

I don't see it fixed, but I am not sure what version of Qt 6 the build I tried used. In any case, I would say that for 2.4 / Qt 5 the stylesheet solution is less hassle than backporting the fix and patching Qt 5.

[ronso0]

But honestly I am a bit surprised that this is getting so much push back. The issue is reported, I provide a fix, and I think it's a very reasonable fix :-/

Sure, the styesheet workaround fixes this QMacStyle issue. Though there were already enough Qt bugs we worked around in Mixxx, and all that ate dev time. I'm not pushing back, I'm questioning whether Mixxx should fix it and maintain it (i.e. possibly adjust it, make sure only it's applied only to affect macOS versions, roll back when the Qt fix arrives in the version used by Mixxx ..)
Just open a PR and gather feedback from users 🤷

[m0dB]

PR created: #11647

[foss-]

Tested
https://github.com/daschuer/mixxx/actions/runs/5241045427 with Qt: 6.5.1 and the transparent and cut-off sliders are resolved.

Really unsure how to proceed. Go with PR #11647 or wait for Qt 6.5? No strong feelings either way.

Qt 6.5.1 in Mixxx 2.5.0-alpha decff8a (vcpkg_update_direct_qt6_1015):

[daschuer]

Since the work is done, is there a reason not to merge #11647 to 2.4?

[foss-]

Merging #11647 to 2.4 and re-visiting 2.5 with the updated Qt seems a sane approach to resolve this problem in both 2.4 and 2.5.

[foss-]

#11647 got merged, fix confirmed in 2.4. Thanks, closing.