[Fixed] Strange occurrence in MB website CSS

MusicBrainz Development
1

I’ve been trying to create a dark profile for MusicBrainz using Stylus. It’s pretty complete, but I just found a weird situation in the CSS for the Countries (https://musicbrainz.org/statistics/countries) and Languages/Scripts (https://musicbrainz.org/statistics/languages-scripts) pages.

Using the browser’s Dev Tools, I found the following. Note the irregular progression of “odd,” “even,” “odd even,” and “” (empty) classes. “odd even” classes seem to always follow ones with an empty class, making me think something goes wrong when generating the list.
image

I have not encountered this in most other tables in MB. It doesn’t happen in Collections, Track lists, or many others. But I have found it on Countries and Languages/Scripts pages.

Strange thing is, when my Stylus style is disabled, these tables correctly use alternating background colors on odd and even lines. But when my style is on, I get this (this is how I discovered it):

image
image290×601 43.1 KB

Is there a reason for this irregular progression, or a problem with the pages?

Observed in Firefox, Brave, MS Edge, and Vivaldi browsers, and on Linux and Windows 10 systems.

5 Likes
2

I cannot reproduce the display glitch (not using Stylus) either. When I check HTML code (Ctrl+U in firefox), “odd” and “even” classes are correctly alternated. I can find occurrences of “odd even” and “” using (browser’s Dev Tools) elements inspector only. It is also not surprising this doesn’t occur with other pages you mentioned as they are not implemented the same way. Still it is difficult to say what is the cause of this problem. In the long term, that other implementation will be used for all tables.

2 Likes
3

This seems likely to be caused by our custom functions passed to tablesorter, so it might be an easy fix - I’ll see if that’s the case and if so we can hopefully fix it before we actually change all this to the react-table implementation (which is likely to take longer). I added MBS-11861 for this issue, thanks!

6 Likes
4

I see this fix has been deployed. Thanks!

1 Like