为什么 Safari 在调整大小时会破坏我的叠加层？

问题描述 投票：0回答：1

我的第一个想法是我在叠加层中缺少“transform-style:preserve-3d”，但它似乎没有做任何事情。前端的东西从来都不是我的强项，所以这个浏览器特定的东西总是让我感到困惑。

适用于我测试过的所有浏览器，Safari 除外。在 OSX 和 iOS Safari 版本 16.5 上复制

<head>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/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>

css safari
1个回答
0
投票

我讨厌这样的错误。有时对我有用的东西是添加

transform: translateZ(0);

与您的

transform-style: preserve-3d
类似，它也可能会强制将其放入新的渲染层中。但不能保证，因为我认为任何一个都应该有效，而你已经尝试过的方法不起作用:(我没有 safari 来测试它

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.