My first thought was that I was missing a ‘transform-style: preserve-3d’ in the overlay, but it didn’t seem to do anything either way. Front end stuff has never been my forté, so this browser specific stuff always befuddles me.
Works on all browsers I’ve tested, with the exception of Safari. Reproduced on OSX and iOS Safari Version 16.5
<head>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.1/dist/cdn.min.js"></script>
</head>
<body class="antialiased text-slate-600 dark:text-slate-300 bg-white dark:bg-slate-800">
<div class="viewWrapper flex items-center justify-center m-10 w-full max-w-[1920px]">
<div class="bg-slate-50 shadow-md rounded-md px-8-py-6 p-5 max-w-full dark:bg-slate-700">
<h1 class="text-2xl font-bold text-gray-700 dark:text-gray-50">Create an account</h1>
<form method="post" action="/register" class="form max-w-xl" autocomplete="off">
<div class="mt-5">
<label for="78ee53d1-4206-43a2-b621-9947db806c6c" class="block text-base font-medium dark:text-slate-300"> Date of birth<span class="text-sm font-thin translate-y-1"> *</span> </label>
<div class="no-contact flex items-center">
<div
x-data="{options: [{id: 1, label: '1'},{id: 2, label: '2'},{id: 3, label: '3'},{id: 4, label: '4'},{id: 5, label: '5'},{id: 6, label: '6'},{id: 7, label: '7'},{id: 8, label: '8'},{id: 9, label: '9'},{id: 10, label: '10'},{id: 11, label: '11'},{id: 12, label: '12'},{id: 13, label: '13'},{id: 14, label: '14'},{id: 15, label: '15'},{id: 16, label: '16'},{id: 17, label: '17'},{id: 18, label: '18'},{id: 19, label: '19'},{id: 20, label: '20'},{id: 21, label: '21'},{id: 22, label: '22'},{id: 23, label: '23'},{id: 24, label: '24'},{id: 25, label: '25'},{id: 26, label: '26'},{id: 27, label: '27'},{id: 28, label: '28'},{id: 29, label: '29'},{id: 30, label: '30'},{id: 31, label: '31'},]}"
class="w-56 mr-2"
>
<div
class="relative"
x-data="{ optionSelected: '',
openDropdown : false,
filter(option) {
return !this.optionSelected || option.toUpperCase().includes(this.optionSelected.toUpperCase())
},
matches(option) {
return option.toUpperCase() === this.optionSelected.toUpperCase();
},
coerce() {
if (!this.optionSelected) return;
for (op of options) {
if (this.matches(op.label)) return;
}
for (op of options) {
if (this.filter(op.label)) {
this.optionSelected = op.label;
break;
}
}
}
}"
>
<div @click="openDropdown = true" class="relative">
<div x-show="!optionSelected" @click="$refs.input.focus()" class="absolute inset-y-3.5 inset-x-2 text-xl text-slate-700">Day</div>
<input type="hidden" name="date_of_birth_day" value="" autocomplete="off" x-model="options.reduce((current, op) => !optionSelected ? '' : (filter(op.label) ? op.id : current), '')" />
<input
id="78ee53d1-4206-43a2-b621-9947db806c6c"
aria-label="Day"
name="date_of_birth_day_label"
x-ref="input"
x-model="optionSelected"
autofill="off"
@keyup="openDropdown = true"
@focusout="setTimeout(() => {coerce(); openDropdown = false;}, 150);"
type="text"
value=""
required=""
class="mr-2 px-2 p-1 pr-8 mt-2 w-full rounded-md border border-slate-900 border-opacity-50 dark:border-none dark:text-slate-950 dark:bg-slate-300 shadow-2xl text-2xl"
maxlength="2"
/>
<label for="78ee53d1-4206-43a2-b621-9947db806c6c" class="absolute inset-y-0 right-0 pr-3 pt-2 flex items-center text-sm leading-5 text-slate-700" aria-label="View options">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</label>
</div>
<div
x-show="openDropdown"
@click.away="openDropdown = false"
class="z-10 absolute mt-2 p-2 px-3 w-full max-h-36 overflow-y-scroll origin-top-right rounded-md bg-slate-100 dark:bg-slate-800 shadow-lg"
style="display: none;"
>
<div>
<template x-for="option in options" :key="option.id">
<div x-show="filter($el.textContent)" class="cursor-pointer block w-full hover:opacity-75" x-text="option.label" @click="optionSelected = option.label; openDropdown = false;"></div>
</template>
</div>
<div x-show="!options.reduce((current, op) => current || filter(op.label), false)" class="select-none cursor-default block w-full" style="display: none;">No results</div>
</div>
</div>
</div>
<div x-data="{options: [
{ id: 1, label: 'January' },
{ id: 2, label: 'February' },
{ id: 3, label: 'March' },
{ id: 4, label: 'April' },
{ id: 5, label: 'May' },
{ id: 6, label: 'June' },
{ id: 7, label: 'July' },
{ id: 8, label: 'August' },
{ id: 9, label: 'September' },
{ id: 10, label: 'October' },
{ id: 11, label: 'November' },
{ id: 12, label: 'December' }
]}" class="w-full mr-2">
<div
class="relative"
x-data="{ optionSelected: '',
openDropdown : false,
filter(option) {
return !this.optionSelected || option.toUpperCase().includes(this.optionSelected.toUpperCase())
},
matches(option) {
return option.toUpperCase() === this.optionSelected.toUpperCase();
},
coerce() {
if (!this.optionSelected) return;
for (op of options) {
if (this.matches(op.label)) return;
}
for (op of options) {
if (this.filter(op.label)) {
this.optionSelected = op.label;
break;
}
}
}
}"
style="transform-style: preserve-3d;">
<div @click="openDropdown = true" class="relative">
<div x-show="!optionSelected" @click="$refs.input.focus()" class="absolute inset-y-3.5 inset-x-2 text-xl text-slate-700" style="display: none;">Month</div>
<input type="hidden" name="date_of_birth_month" value="" autocomplete="off" x-model="options.reduce((current, op) => !optionSelected ? '' : (filter(op.label) ? op.id : current), '')" />
<input
id="7695932a-6ac4-49ee-8385-6476f537be33"
aria-label="Month"
name="date_of_birth_month_label"
x-ref="input"
x-model="optionSelected"
autofill="off"
@keyup="openDropdown = true"
@focusout="setTimeout(() => {coerce(); openDropdown = false;}, 150);"
type="text"
value=""
required=""
class="mr-2 px-2 p-1 pr-8 mt-2 w-full rounded-md border border-slate-900 border-opacity-50 dark:border-none dark:text-slate-950 dark:bg-slate-300 shadow-2xl text-2xl"
maxlength="9"
/>
<label for="7695932a-6ac4-49ee-8385-6476f537be33" class="absolute inset-y-0 right-0 pr-3 pt-2 flex items-center text-sm leading-5 text-slate-700" aria-label="View options">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</label>
</div>
<div
x-show="openDropdown"
@click.away="openDropdown = false"
class="z-10 absolute mt-2 p-2 px-3 w-full max-h-36 overflow-y-scroll origin-top-right rounded-md bg-slate-100 dark:bg-slate-800 shadow-lg"
style="display: none;"
>
<div style="transform-style: preserve-3d; https: //www.careerexplorer.com/;">
<template x-for="option in options" :key="option.id">
<div x-show="filter($el.textContent)" class="cursor-pointer block w-full hover:opacity-75" x-text="option.label" @click="optionSelected = option.label; openDropdown = false;"></div>
</template>
</div>
<div x-show="!options.reduce((current, op) => current || filter(op.label), false)" class="select-none cursor-default block w-full">No results</div>
</div>
</div>
</div>
<div
x-data="{options: [{id: 2011, label: '2011'},{id: 2010, label: '2010'},{id: 2009, label: '2009'},{id: 2008, label: '2008'},{id: 2007, label: '2007'},{id: 2006, label: '2006'},{id: 2005, label: '2005'},{id: 2004, label: '2004'},{id: 2003, label: '2003'},{id: 2002, label: '2002'},{id: 2001, label: '2001'},{id: 2000, label: '2000'},{id: 1999, label: '1999'},{id: 1998, label: '1998'},{id: 1997, label: '1997'},{id: 1996, label: '1996'},{id: 1995, label: '1995'},{id: 1994, label: '1994'},{id: 1993, label: '1993'},{id: 1992, label: '1992'},{id: 1991, label: '1991'},{id: 1990, label: '1990'},{id: 1989, label: '1989'},{id: 1988, label: '1988'},{id: 1987, label: '1987'},{id: 1986, label: '1986'},{id: 1985, label: '1985'},{id: 1984, label: '1984'},{id: 1983, label: '1983'},{id: 1982, label: '1982'},{id: 1981, label: '1981'},{id: 1980, label: '1980'},{id: 1979, label: '1979'},{id: 1978, label: '1978'},{id: 1977, label: '1977'},{id: 1976, label: '1976'},{id: 1975, label: '1975'},{id: 1974, label: '1974'},{id: 1973, label: '1973'},{id: 1972, label: '1972'},{id: 1971, label: '1971'},{id: 1970, label: '1970'},{id: 1969, label: '1969'},{id: 1968, label: '1968'},{id: 1967, label: '1967'},{id: 1966, label: '1966'},{id: 1965, label: '1965'},{id: 1964, label: '1964'},{id: 1963, label: '1963'},{id: 1962, label: '1962'},{id: 1961, label: '1961'},{id: 1960, label: '1960'},{id: 1959, label: '1959'},{id: 1958, label: '1958'},{id: 1957, label: '1957'},{id: 1956, label: '1956'},{id: 1955, label: '1955'},{id: 1954, label: '1954'},{id: 1953, label: '1953'},{id: 1952, label: '1952'},{id: 1951, label: '1951'},{id: 1950, label: '1950'},{id: 1949, label: '1949'},{id: 1948, label: '1948'},{id: 1947, label: '1947'},{id: 1946, label: '1946'},{id: 1945, label: '1945'},{id: 1944, label: '1944'},{id: 1943, label: '1943'},{id: 1942, label: '1942'},{id: 1941, label: '1941'},{id: 1940, label: '1940'},{id: 1939, label: '1939'},{id: 1938, label: '1938'},{id: 1937, label: '1937'},{id: 1936, label: '1936'},{id: 1935, label: '1935'},{id: 1934, label: '1934'},{id: 1933, label: '1933'},{id: 1932, label: '1932'},{id: 1931, label: '1931'},{id: 1930, label: '1930'},{id: 1929, label: '1929'},{id: 1928, label: '1928'},{id: 1927, label: '1927'},{id: 1926, label: '1926'},{id: 1925, label: '1925'},{id: 1924, label: '1924'},{id: 1923, label: '1923'},{id: 1922, label: '1922'},{id: 1921, label: '1921'},{id: 1920, label: '1920'},{id: 1919, label: '1919'},{id: 1918, label: '1918'},{id: 1917, label: '1917'},{id: 1916, label: '1916'},{id: 1915, label: '1915'},{id: 1914, label: '1914'},{id: 1913, label: '1913'},{id: 1912, label: '1912'},{id: 1911, label: '1911'},{id: 1910, label: '1910'},{id: 1909, label: '1909'},{id: 1908, label: '1908'},{id: 1907, label: '1907'},{id: 1906, label: '1906'},{id: 1905, label: '1905'},{id: 1904, label: '1904'},{id: 1903, label: '1903'},{id: 1902, label: '1902'},{id: 1901, label: '1901'},{id: 1900, label: '1900'},]}"
class="w-56"
>
<div class="relative"
x-data="{ optionSelected: '',
openDropdown : false,
filter(option) {
return !this.optionSelected || option.toUpperCase().includes(this.optionSelected.toUpperCase())
},
matches(option) {
return option.toUpperCase() === this.optionSelected.toUpperCase();
},
coerce() {
if (!this.optionSelected) return;
for (op of options) {
if (this.matches(op.label)) return;
}
for (op of options) {
if (this.filter(op.label)) {
this.optionSelected = op.label;
break;
}
}
}
}">
<div @click="openDropdown = true" class="relative">
<div x-show="!optionSelected" @click="$refs.input.focus()" class="absolute inset-y-3.5 inset-x-2 text-xl text-slate-700">Year</div>
<input type="hidden" name="date_of_birth_year" value="" autocomplete="off" x-model="options.reduce((current, op) => !optionSelected ? '' : (filter(op.label) ? op.id : current), '')" />
<input
id="0527b7c8-2779-41b4-99b9-9cbae2b43842"
aria-label="Year"
name="date_of_birth_year_label"
x-ref="input"
x-model="optionSelected"
autofill="off"
@keyup="openDropdown = true"
@focusout="setTimeout(() => {coerce(); openDropdown = false;}, 150);"
type="text"
value=""
required=""
class="mr-2 px-2 p-1 pr-8 mt-2 w-full rounded-md border border-slate-900 border-opacity-50 dark:border-none dark:text-slate-950 dark:bg-slate-300 shadow-2xl text-2xl"
maxlength="4"
/>
<label for="0527b7c8-2779-41b4-99b9-9cbae2b43842" class="absolute inset-y-0 right-0 pr-3 pt-2 flex items-center text-sm leading-5 text-slate-700" aria-label="View options">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</label>
</div>
<div
x-show="openDropdown"
@click.away="openDropdown = false"
class="z-10 absolute mt-2 p-2 px-3 w-full max-h-36 overflow-y-scroll origin-top-right rounded-md bg-slate-100 dark:bg-slate-800 shadow-lg"
style="display: none;"
>
<div>
<template x-for="option in options" :key="option.id">
<div x-show="filter($el.textContent)" class="cursor-pointer block w-full hover:opacity-75" x-text="option.label" @click="optionSelected = option.label; openDropdown = false;"></div>
</template>
</div>
<div x-show="!options.reduce((current, op) => current || filter(op.label), false)" class="select-none cursor-default block w-full" style="display: none;">No results</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-5">
<label for="5d41b9b6-de9b-48d0-a30b-dd5befb5bf9a" class="block text-base font-medium dark:text-slate-300"> Username<span class="text-sm font-thin translate-y-1"> *</span> </label>
<div class="flex items-center">
<input
id="5d41b9b6-de9b-48d0-a30b-dd5befb5bf9a"
type="text"
name="username"
class="px-2 p-1 mt-2 w-full rounded-md border border-slate-900 border-opacity-50 dark:border-none dark:text-slate-950 dark:bg-slate-300 shadow-2xl text-2xl"
required=""
/>
</div>
</div>
</form>
</div>
</div>
</body>>Solution :
I hate bugs like this. Something that works sometimes for me is to add
transform: translateZ(0);
similar to your transform-style: preserve-3d it might also force this into a new rendering layer. No guarantees though since I think either one should work and what you’ve already tried didn’t work 🙁 I do not have safari to test it out on