Wavesurfer.js: Style/background color issue after upgrading chrome to version 81

[the-ashraf]

Wavesurfer.js version(s):

3.3.1 and 3.3.2

Browser and operating system version(s):

Chrome Version 81.0.4044.92 (Official Build) (64-bit) / Windows 10 1909

Code needed to reproduce the issue:

mounted() {
            this.wave = WaveSurfer.create({
                container: this.$refs.waveform,
                waveColor: '#3686c9',
                progressColor: '#C06C84',
                barWidth: 2,
                cursorColor: 'transparent',
            });

            this.wave.load(this.url);

everything was working just fine before chrome updated to 81 last night
this is the appearance i'm after, and as you see it works fine on chrome 80, i downgraded to test that it works.

on chrome 81 when i keep the cursor color set to "transparent", it doesn't show any progress color at all.

if i remove the cursor color as in default or set it to any other color, the whole waveform gets a black background.

[sundayz]

Can confirm this happens on Chrome as of very recently, doesn't seem to happen in Firefox. Wavesurfer 3.3.1

[the-ashraf]

Yeah, tried with Firefox on both Windows and Mac. also Safari , but here's the weird thing, is it doesn't happen on latest Chrome on Mac.

[karolpiczak]

Same issue here on Chrome 81.0.4044.92 / Windows for a couple of days.

[Dr-Snuggles]

Me 2

[DarrenChowles]

Experiencing the same issue in Chrome 81. No problems in Firefox.

[thijstriemstra]

Here are the changes for Chrome 81: https://www.chromestatus.com/features#milestone%3D81

Nothing there seems to be related to this issue though..

[thijstriemstra]

@hot4mix did you also try rgba(0,0,0,0) instead of transparent?

[PetrKnedlik]

yeah, same issue Chrome 81. No problems in Firefox.

[thijstriemstra]

can you see if it's related to this commit: https://github.com/katspaugh/wavesurfer.js/commit/d0187a9533d9492e950e31cd547583293e6a241a

try setting the drawingContextAttributes.desynchronized option to false:

drawingContextAttributes: {
             // Boolean that hints the user agent to reduce the latency
             // by desynchronizing the canvas paint cycle from the event
             // loop
             desynchronized: false
},

[karolpiczak]

Switching off desynchronized painting seems to fix the issue.

[thijstriemstra]

that's good to hear @karolpiczak. If more people can confirm this, then we can make a new release where this option is false by default (unless someone has a better suggestion).

[the-ashraf]

@hot4mix did you also try rgba(0,0,0,0) instead of transparent?

i did, and it didn't help.

try setting the drawingContextAttributes.desynchronized option to false:

that did the trick, everything looking fine like expected now.

[DarrenChowles]

drawingContextAttributes: {
    desynchronized: false
}

Worked for me. Thanks, @thijstriemstra