Style/background color issue after upgrading chrome to version 81

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.

[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.