List background swaps when scrolling

[lfuelling]

Hi,

I've just started using play-midnight (the latest version from the chrome web store) and I stumbled upon a small issue with the background color of playlists.

The color keeps swapping (light and dark) when scrolling past the first few songs.

Here's a screencap to visualize what I mean:

[ducky]

That's actually really weird, haha. I just looked into it and I see why, though. Sadly, there's nothing I can do easily (that I know of) to fix that.

It's because I'm doing the zebra stripes (that Google doesn't do) and the way their playlist scroller works, it's actually removing and adding items as you scroll, which is causing the nth-child css selector to swap between as the items get added and removed.

The only way I know to fix it would be to manually add a class to the rows every time you go to a page which would probably just make Play Music slower than it already is. Or possibly add an option to disable zebra stripes.

Also, appreciate the visual reference, super helpful! 👍

[geudrik]

I wouldn't call this a bug - the cause is out of your control. The even-odd class attributes are being added by Googles libs as you scroll, which gives the alternating row styles.

@chrisxclash You could look at the length of the table each time new rows are added and add an empty row if the number of rows would cause a background change

[geudrik]

<tbody data-count="34" data-start-index="7" data-end-index="34"> is the important bit. Just watch for changes in data-count, data-start-index, and data-end-index and modify as necessary to prevent the JS from auto-formatting the rows. The downside of doing it this way would be that you'll need to undo those changes when new rows are added (i think - I haven't tested).

These would the same attributes you monitor (onChange even) and add an empty row if the rowcount becomes its inverse (even vs. odd total count)

[ducky]

@geudrik - Yeah, I definitely had that idea in mind, but it seems like overkill for something as simple as zebra stripe styles. I didn't feel the benefit would outweigh the extra JavaScript that would have to watch and swap classes all the time since Play Music is already slow.

It seems really weird in general how they're using a heightened placeholder and just swapping rows, but I can see it be beneficial performance-wise, idk.

[geudrik]

\shrug totally understand your hesitance here. I agree that it's probably not worth the extra effort

Just figured I'd throw my ideas out 😄

[ducky]

Haha yeah. I'll keep it open for now as a reminder.

I'm currently in the works of rewriting all my JavaScript anyways, so I'll have to look into it when I'm putting everything else together.

[erickrawczyk]

Is there any way to turn off the zebra stripes? I find the swapping when scrolling to be more detrimental to the experience than including them.

[ducky]

@erickrawczyk - Currently no, but at this point I think there definitely should be. I'll add a note to add an option for disabling it when I get to working on the next update.