csssafari
Why is Safari breaking my overlay when it resizes?
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
- How to perform addition of two vectors of 8-bit integers with a single addition in C/C++
- GNU RISC-V Embedded GCC throws "x ISA extension `xw' must be set with the versions" error
- How to implement variable sized array within C struct
- Counting pulses using a swiss flow meter with an Arduino, how is it done?
- How to create a folder in C (need to run on both Linux and Windows)
- Is there any way to compute the width of an integer type at compile-time?
- What kind of implementation can I use for a static associative array on a vintage system with very limited resources?
- How can I initialize all members of an array to the same value?
- Is C notably faster than C++
- How to get the Windows SDK version number a program is compiling with at compile time
- Confused by difference between expression inside if and expression outside if
- Equivalent of atoi for unsigned integers
- k&r: Exercise 1-18. Program takes input but doesnt produce any output?
- Using in C thrd_sleep() to either wait for time or interrupt by signal. Example?
- How to get the sign, mantissa and exponent of a floating point number
- How can I compute `exp(x)/2` when `x` is large?
- c programming: answer always equates to 0
- Is it possible to access a parameter of a function from another function in C?
- Will this expression evaluate to true or false (1 or 0) in C?
- What Is the Return Value of strcspn() When Str1 Does not Contain Str2?
- Mapping a numeric range onto another
- Signalled and non-signalled state of event
- Why is faster to do a branch than a lookup?
- Avoid security.ArrayBound warning when using container_of
- Forcing 64-bit long doubles?
- "error: redeclaration of 'myVariable' with no linkage:" - what's the linkage?
- Branchlessly map one list of integers to another
- SQLBindCol for long integer value on 64Bit platform?
- What's wrong with my code? CS50 Pset2: Readability
- Is there a way to redirect stdout/stderr to a string?