UI Bug

[MuslemRahimi]

Describe the bug

I have a weird blue rectangle when I open the Drawer for the first time on my IPhone 13 (see image below). This is true for safari, firefox and chrome on my phone. But on desktop everything works fine.

You can also test it for yourself on my website: https://stocknear.com/ Just scroll down please until you see the info svg

Reproduction

<div>
          <Drawer.Root>
            <Drawer.Trigger>
              <label class="text-white text-xl p-4 font-medium flex flex-row items-center">
                Trending
                <svg class="ml-1 mt-0.5 w-5 h-5 inline-block" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="gray"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="info-circle"> <g> <circle cx="12" cy="12" data-name="--Circle" fill="none" id="_--Circle" r="10" stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle> <line fill="none" stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="12" y2="16"></line> <line fill="none" stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="12" x2="12" y1="8" y2="8"></line> </g> </g> </g> </g></svg>
              </label>
            </Drawer.Trigger>
            <Drawer.Portal>
              <Drawer.Overlay class="fixed inset-0 bg-black/40" />
              <Drawer.Content
                class="fixed bottom-0 left-0 right-0 z-50  mt-24 flex h-auto flex-col rounded-t-[10px] bg-[#191919]"
              >
                <div class="flex-1 rounded-t-[10px] bg-[#191919] p-4">
                  <div class="mx-auto mb-8 h-1.5 w-20 flex-shrink-0 rounded-full bg-[#404040]" />
                  <div class="max-w-md m-auto text-center mb-10">
                    <Drawer.Title class="text-white text-xl mb-2 font-medium">
                      Trending
                    </Drawer.Title>
                    <p class="mb-10 text-white">
                      Explore today's market highlights, including top gainers, losers and the most actively traded stocks.
                    </p>

                      <Drawer.Close>
                        <label class="px-7 py-2 rounded-full border border-[#0DDE00] bg-[#0DDE00] text-center text-black">
                          OK
                        </label>
                      </Drawer.Close>

                  </div>
                </div>
              </Drawer.Content>
            </Drawer.Portal>
          </Drawer.Root>
        </div>

Logs

No response

System Info

System:
    OS: Linux 6.5 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD Ryzen 7 1700 Eight-Core Processor
    Memory: 7.94 GB / 15.55 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.17.1 - /usr/bin/node
    npm: 9.6.7 - /usr/bin/npm
    bun: 1.0.23 - /snap/bin/bun
  Browsers:
    Chrome: 120.0.6099.224
  npmPackages:
    @sveltejs/kit: ^1.28.0 => 1.30.3 
    svelte: ^4.2.0 => 4.2.8 
    typescript: ^5.1.3 => 5.3.3 
    vaul-svelte: ^0.0.7 => 0.0.7

Severity

annoyance

[huntabyte]

This is a focus visible style and is related to how your button is styled, rather than the library itself.

[MuslemRahimi]

Not sure if this is correct. It works without problems on Android but on Iphone it has this weird border.

But whatever I will look for something else