[BUG] - Dropdown with backdrop blur works incorrectly on mobile devices

NextUI Version

2.3.6
Describe the bug

I have a component with several DropDowns. Everything works perfectly on the computer, but on the phone, the menu button often doesn't open on the first try. I tried disabling all styles and libraries, but the problem persists.
https://github.com/nextui-org/nextui/assets/99473719/60757e1e-2c37-4d5c-98c1-a3c9f38802ed
<div className="relative -mt-24 max-w-5xl mx-auto p-2 xl:p-0">
            <div className="grid grid-cols-1">
                <form className="p-6 bg-white dark:bg-slate-900 rounded-xl shadow-md dark:shadow-green-700">
                    <div className="text-dark text-start">
                        <div className="grid lg:grid-cols-4 md:grid-cols-2 grid-cols-1 lg:gap-0 gap-6 text-xl">
                            <div className='lg:pr-2'>
                                <p className="text-slate-900 dark:text-white">{isRU ? 'Город:' : 'City:'}</p>
                                <Dropdown key='DD1' backdrop="blur">
                                    <DropdownTrigger>
                                        <Button fullWidth className='text-lg mt-2' variant='shadow' endContent={<IoMdArrowDropdown />}>
                                            {city || 'Все'}
                                        </Button>
                                    </DropdownTrigger>
                                    <DropdownMenu
                                        className='dark:text-white'
                                        aria-label="Single selection example"
                                        variant="flat"
                                        disallowEmptySelection
                                        selectionMode="single"
                                        selectedKeys={new Set([city])}
                                        onSelectionChange={handleCityChange}
                                    >
                                        <DropdownItem key={isRU ? 'Все' : 'All'}>{isRU ? 'Все' : 'All'}</DropdownItem>
                                        <DropdownItem key="Tirana">Tirana</DropdownItem>
                                        <DropdownItem key="Durres">Durres</DropdownItem>
                                        <DropdownItem key="Vlore">Vlore</DropdownItem>
                                        <DropdownItem key="Saranda">Saranda</DropdownItem>
                                        <DropdownItem key="Shengjin">Shengjin</DropdownItem>
                                    </DropdownMenu>
                                </Dropdown>
                            </div>
                            <div className='lg:pr-2'>
                                <p className="text-slate-900 dark:text-white">{isRU ? 'Недвижимость:' : 'Property:'}</p>
                                <Dropdown key='DD2' backdrop="blur">
                                    <DropdownTrigger>
                                        <Button fullWidth className='text-lg mt-2' variant='shadow' endContent={<IoMdArrowDropdown />}>
                                            {sellOrRent || 'Вся'}
                                        </Button>
                                    </DropdownTrigger>
                                    <DropdownMenu
                                        className='dark:text-white'
                                        aria-label="Single selection example"
                                        variant="flat"
                                        disallowEmptySelection
                                        selectionMode="single"
                                        selectedKeys={new Set([sellOrRent])}
                                        onSelectionChange={handleSellOrRentChange}
                                    >
                                        <DropdownItem key={isRU ? 'Все' : 'All'}>{isRU ? 'Все' : 'All'}</DropdownItem>
                                        <DropdownItem key={isRU ? 'Покупка' : 'Buy'}>{isRU ? 'Покупка' : 'Buy'}</DropdownItem>
                                        <DropdownItem key={isRU ? 'Аренда' : 'Rent'}>{isRU ? 'Аренда' : 'Rent'}</DropdownItem>
                                    </DropdownMenu>
                                </Dropdown>
                            </div>
                            <div className='lg:pr-4'>
                                <p className="text-slate-900 dark:text-white">{isRU ? 'Тип:' : 'Type:'}</p>
                                <Dropdown key='DD3' backdrop="blur">
                                    <DropdownTrigger>
                                        <Button fullWidth className='text-lg mt-2' variant='shadow' endContent={<IoMdArrowDropdown />}>
                                            {propertyType || 'Все'}
                                        </Button>
                                    </DropdownTrigger>
                                    <DropdownMenu
                                        className='dark:text-white'
                                        aria-label="Single selection example"
                                        variant="flat"
                                        disallowEmptySelection
                                        selectionMode="single"
                                        selectedKeys={new Set([propertyType])}
                                        onSelectionChange={handlePropertyTypeChange}
                                    >
                                        <DropdownItem key={isRU ? "Все" : "All"}>{isRU ? "Все" : "All"}</DropdownItem>
                                        <DropdownItem key={isRU ? "Дом" : "House"}>{isRU ? "Дом" : "House"}</DropdownItem>
                                        <DropdownItem key={isRU ? "Квартира" : "Apartment"}>{isRU ? "Квартира" : "Apartment"}</DropdownItem>
                                    </DropdownMenu>
                                </Dropdown>
                            </div>
                            <div>
                                <Slider
                                    key={resetKey}
                                    className='dark:text-white'
                                    size="lg"
                                    label={isRU ? "Цена:" : 'Price:'}
                                    maxValue={sliderMaxPrice}
                                    step={100}
                                    defaultValue={[minPrice, maxPrice]}
                                    onChange={([newMinPrice, newMaxPrice]) => {
                                        setMinPrice(newMinPrice);
                                        setMaxPrice(newMaxPrice);
                                    }}
                                    formatOptions={{
                                        style: "currency",
                                        currency: "EUR",
                                        maximumFractionDigits: 0
                                    }}
                                    classNames={{
                                        base: "max-w-md gap-2 ",
                                        label: "text-xl",
                                        filler: "bg-gradient-to-r from-gray-300 to-green-300 dark:from-gray-600 dark:to-green-800",
                                    }}
                                    renderThumb={({ index, ...props }) => (
                                        <div
                                            {...props}
                                            className="group p-1 top-1/2 bg-background border-small border-default-200 dark:border-default-400/50 shadow-medium rounded-full cursor-grab data-[dragging=true]:cursor-grabbing"
                                        >
                                            <span
                                                className={cn(
                                                    "transition-transform bg-gradient-to-br shadow-small rounded-full w-8 h-8 block group-data-[dragging=true]:scale-80",
                                                    index === 0
                                                        ? "from-gray-200 to-gray-500 dark:from-gray-400 dark:to-gray-600"
                                                        : "from-green-200 to-green-600 dark:from-green-600 dark:to-green-800",
                                                )}
                                            />
                                        </div>
                                    )}
                                />
                            </div>
                        </div>
                        <div className="mt-6 space-y-6 sm:space-y-0 sm:flex items-center">
                            <Button className='bg-green-500 w-full lg:w-[24.5%] text-lg mr-2' variant="shadow" onPress={onSearch}>
                                {isRU ? "Подобрать" : 'Search'}
                            </Button>
                            <Button className='border-green-500 w-full lg:w-[24.5%] text-lg mr-2' variant="bordered" onPress={handleResetFilters}>
                                {isRU ? "Сбросить фильтры" : 'Reset filters'}
                            </Button>
                            <ButtonGroup className='w-full lg:w-[24%] text-lg mr-2'>
                                <Button onClick={() => setIsGrid(true)} className='text-lg w-full'><FiGrid /></Button>
                                <Button onClick={() => setIsGrid(false)} className='text-lg w-full'><FiList /></Button>
                            </ButtonGroup>
                            <Dropdown key='DD4' backdrop="blur">
                                <DropdownTrigger>
                                    <Button fullWidth className='text-lg w-full lg:w-[26%]' variant='shadow' endContent={<IoMdArrowDropdown />}>
                                        {isRU ? "Объектов на странице: " : 'Items per page: '}{itemsPerPage}
                                    </Button>
                                </DropdownTrigger>
                                <DropdownMenu
                                    className='dark:text-white'
                                    aria-label="Single selection example"
                                    variant="flat"
                                    disallowEmptySelection
                                    selectionMode="single"
                                // selectedKeys={new Set([propertyType])}
                                // onSelectionChange={handlePropertyTypeChange}
                                >
                                    <DropdownItem onClick={() => setItemsPerPage(12)} key="12">12</DropdownItem>
                                    <DropdownItem onClick={() => setItemsPerPage(24)} key="24">24</DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </div>
                    </div>
                </form>
            </div>
        </div>
Your Example Website or App

https://cactus-re.vercel.app/
Steps to Reproduce the Bug or Issue

Open the website, switch to the mobile version, try to click on buttons several times. Also sometimes bug appears when after moving slider.
Expected behavior

Expected opening DropDowns every time
Screenshots or Videos

https://github.com/nextui-org/nextui/assets/99473719/7297df9f-67df-47cd-973d-f252e6fb49c2
Operating System Version

Windows
Browser

Chrome
nextui-org / nextui

[BUG] - Dropdown with backdrop blur works incorrectly on mobile devices #3095
