Weird presentation behavior in Chrome

[carlhemp]

I noticed recently that the browser sends an http request every time you go to a new chunk in presentation in Chrome.

I narrowed it down to this line of code:

yCanta2/presentation.js

Line 410 in f9f9cde

$('#slides').css('--percent', (((current_song.chunk_index + 1) / total) * 100));

The code just sets a css variable that is used for animating the :before and :after layers that are used for a moving background.

I have no idea why this would trigger a http request! I tried changing it to vanilla js, and it still does the same behavior.

Firefox does not have this going on.

Any thoughts @evanhempel as to what may be going on? Kinda think it's gotta be a bug in Chrome...

[evanhempel]

Using chromium I was able to reproduce, but it didn't seem to be caused by that line of code (I commented it out and the requests continued).

Looking at the Initiator for the request in the network tab of dev tools it appeared to be caused by the win.width() line in scaleText(). That's a jQuery function so I think the blame lies with them and not chrome. As a test I converted the win.width() and win.height() lines to window.innerWidth and window.innerHeight and with that change I stopped seeing the requests. That change, however, isn't a full fix since it is only getting the current window width/height and needs some additional work to function with multiple windows.

Long term, it may make sense to get rid of jQuery, I've read its fallen out of favor and I suspect we can probably do what we need for the presentation mode without additional JS libraries.

[carlhemp]

Ah, thanks for finding the real culprit.

I am onboard with removing jQuery. I've been trying to use it less/not at all in new code. It would lighten our codebase load time as well.