Repository: tauri
Issue: [bug]  Img stream flickers when built on Ubuntu 20.04 only
Labels: type: bug,status: upstream,platform: Linux,status: needs triage

### Describe the bug

I am streaming ROS images to my Tauri application. When I build on MacOS, Windows or Ubuntu Latest there is no issue. When I build on Ubuntu 20.04, the img flickers wildly. I have tested with different streaming methods, but any time I use an img tag in Tauri in Ubuntu 20.04 it flickers. It does not flicker if I run the same code in a simple HTML file in firefox on a Ubuntu 20.04 machine. 

I do not get any errors related to the img, only some about ThreeJS (see below)

This is my code:

``` 
<script>
	import ROSLIB from 'roslib';
	import rosConnection from '../stores/rosConnection.js';
	let imageUrl = '';

	rosConnection.subscribe((ros) => {
		if (ros) {
			// Subscribe to margin cloud
			const imageTrack = new ROSLIB.Topic({
				ros: ros,
				name: '/vins_estimator/image_track/compressed',
				messageType: 'sensor_msgs/CompressedImage',
				queue_size: 1
			});

			imageTrack.subscribe((message) => {
				// Convert base64 to Blob
				const byteCharacters = atob(message.data);
				const byteNumbers = new Array(byteCharacters.length);
				for (let i = 0; i < byteCharacters.length; i++) {
					byteNumbers[i] = byteCharacters.charCodeAt(i);
				}
				const byteArray = new Uint8Array(byteNumbers);
				const blob = new Blob([byteArray], { type: 'image/jpeg' });

				// Revoke old URL
				if (imageUrl) {
					URL.revokeObjectURL(imageUrl);
				}

				// Create URL for the Blob
				imageUrl = URL.createObjectURL(blob);
			});
		}
	});
</script>

<div class="root">
    {#if imageUrl}
        <img src={imageUrl} alt="Video stream" />
    {:else}
        <h1>Waiting for video</h1>
    {/if}
</div>
<style>
	img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.root {
		display: flex;
        justify-content: center;
        align-items: center;
		height: 100%;
	}

	h1 {
		text-align: center;
		color: white;
	}
</style>

``` 

I don't know if this is related, but I also get the following warning from Three.JS:

[Warning] THREE.WebGLRenderer: WebGL 1 support was deprecated in r153 and will be removed in r163. (2.BqThYVA_.js, line 3803) [Warning] THREE.WebGLRenderer: EXT_blend_minmax extension not supported. (2.BqThYVA_.js, line 3701)

This seems to be because Ubuntu 20.04 uses Webkit2GTK 2.38 and not 2.39

### Reproduction

_No response_

### Expected behavior

The image should be shown without flickering on Ubuntu 20.04, like it does on other platforms

### Full `tauri info` output

```text
[✔] Environment
    - OS: Fedora 39.0.0 X64
    ✔ webkit2gtk-4.0: 2.44.0
    ✔ rsvg2: 2.57.1
    ✔ rustc: 1.76.0 (07dca489a 2024-02-04)
    ✔ cargo: 1.76.0 (c84b36747 2024-01-18)
    ✔ rustup: 1.27.0 (bbb9276d2 2024-03-08)
    ✔ Rust toolchain: stable-x86_64-unknown-linux-gnu (default)
    - node: 20.10.0
    - yarn: 1.22.22
    - npm: 10.2.3

[-] Packages
    - tauri [RUST]: 1.6.1
    - tauri-build [RUST]: 1.5.1
    - wry [RUST]: 0.24.7
    - tao [RUST]: 0.16.7
    - @tauri-apps/api [NPM]: 1.5.3
    - @tauri-apps/cli [NPM]: 1.5.11

[-] App
    - build-type: bundle
    - CSP: unset
    - distDir: ../build
    - devPath: http://localhost:5173/
    - framework: Svelte
    - bundler: Vite
```


### Stack trace

_No response_

### Additional context

_No response_