Works perfectly in FF and Chrome. Here is my code, the expected output and the Safari output:
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="mt-2">
<input type="text" id="timezone-search" autofocus placeholder="Search for timezone" class="w-full z-50 px-4 py-2 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" />
<div id="timezone-dropdown" class="z-50 mt-1 w-full bg-white rounded-md shadow-lg max-h-40 overflow-auto border border-gray-300">
<ul id="timezone-options" class="py-1 text-sm text-gray-700">
<option class="px-4 py-2 hover:bg-indigo-600 hover:text-white cursor-pointer">Here's an option</option>
</ul>
</div>
</div>
</body>
</html>
JS:
const options = [
"Andorra", "Dubai", "Kabul" ]
const tZOptions = document.getElementById("timezone-options");
for(var i = 0; i < options.length; i++) {
var el = document.createElement("option");
el.textContent = options[i];
el.value = values[i];
el.classList.add("px-4", "py-2", "hover:bg-indigo-600", "hover:text-white", "cursor-pointer");
tZOptions.appendChild(el);
}
Expected behavior (working in FF and Chrome):
Safari behavior:
