QML Webview does not show in Android, but works in IOS

CellCS

QT 5.12 +. QML for mobile app.

webview content is using HTML file with embedded CSS and JSON data using plain JavaScript.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Product List</title>
	<style>
		table {
			border-collapse: collapse;
			width: 100%;
		}

		th, td {
			text-align: left;
			padding: 8px;
			border: 1px solid #ddd;
		}

		th {
			background-color: #f2f2f2;
			color: #444;
		}

		tr:nth-child(even) {
			background-color: #f2f2f2;
		}
	</style>
</head>
<body>
	<h1>Product List</h1>
	<table>
		<thead>
			<tr>
				<th>Name</th>
				<th>Price</th>
			</tr>
		</thead>
		<tbody id="product-list">
		</tbody>
	</table>

	<script>
		// Define the data as a JSON object
		const products = {
			items: [
				{name: 'Product A', price: 9.99},
				{name: 'Product B', price: 19.99},
				{name: 'Product C', price: 29.99},
			]
		};

		// Get the target element for the product list
		const productList = document.getElementById('product-list');

		// Loop through each product and append it to the table
		products.items.forEach(item => {
			const row = document.createElement('tr');
			row.innerHTML = `
				<td>${item.name}</td>
				<td>$${item.price}</td>
			`;
			productList.appendChild(row);
		});
	</script>
</body>
</html>

iOS shows correctly as following screenshot, but android shows empty/blank.:

CellCS

If using simple html content for android, webview in android show up the content, here is simple content:

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

how to make android webview to show a little complicated content? or have to upgrade with QT6.5 with using web engine in QML?