Both of Android and Ios opens native color picker at the first time

[jaewon1022]

First, Thank you for this awesome library.

I'm making mobile web app with svelte color panting images with svelte-awesome-color-picker package.

Meanwhile, I've found this bugs(?) when I first opened the color picker.

I was testing with android, and saw this situation below pictures.

Android v14

---

IOS v17.5.1

After then, I've tryed several times with opening and closing color pickers, it never showing again.

It's just happening when I opened first time.

I've already seen other issues such as #62 or #18.

In these issues, the problem was versions but I'm using v3 right now.

Could you find out why this happens? Thanks again ;)

PS. this is my code and package.json where I used.

{
  "name": "everybody-sveltekit-mobile",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
    "lint": "prettier --check . && eslint .",
    "format": "prettier --write ."
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "^3.0.0",
    "@sveltejs/kit": "^2.0.0",
    "@sveltejs/vite-plugin-svelte": "^3.0.0",
    "@types/eslint": "^8.56.0",
    "@typescript-eslint/eslint-plugin": "^7.0.0",
    "@typescript-eslint/parser": "^7.0.0",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-svelte": "^2.35.1",
    "postcss": "^8.4.38",
    "prettier": "^3.1.1",
    "prettier-plugin-svelte": "^3.1.2",
    "svelte": "^4.2.7",
    "svelte-check": "^3.6.0",
    "tailwindcss": "^3.4.3",
    "tslib": "^2.4.1",
    "typescript": "^5.0.0",
    "vite": "^5.0.3"
  },
  "type": "module",
  "dependencies": {
    "axios": "^1.6.8",
    "buffer": "^6.0.3",
    "firebase": "^10.12.0",
    "process": "^0.11.10",
    "svelte-awesome-color-picker": "^3.1.0",
    "svelte-moveable": "^0.45.0"
  }
}

<script lang="ts">
  import { onMount } from 'svelte';
  import ColorPicker from 'svelte-awesome-color-picker';

  let currentFill = `fill:rgb(255, 255, 255)`;

  let hex = '#f6f0dc';

  let rgb = { r: 246, g: 240, b: 220, a: 1 };

  let hsv = { h: 46, s: 11, v: 96, a: 1 };

  // instance of Colord
  let color: any;

  function handleSvgClick(event: any) {
    if (event.target?.tagName === 'svg' || event.traget?.tagName === 'path') return;

    event.target.style = currentFill;
  }

  onMount(() => {
    const item = document.getElementById('_fish_2');
    if (!item) return;

    item.addEventListener('click', handleSvgClick);

    return () => {
      item.removeEventListener('click', handleSvgClick);
    };
  });
</script>

<div class="flex flex-col gap-y-10 w-full">
  <div class="flex flex-col w-full h-20 z-50">
    <ColorPicker bind:hex bind:rgb bind:hsv bind:color />
  </div>

  <svg
    id="_fish_2"
    class="w-auto h-4/5 object-none"
    data-name="fish 2"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 694.19 269.65"
  >
    <defs>
      <style>
        .cls-1 {
          fill: #fff;
        }
      </style>
    </defs>
    <g>
      <g id="tail">
        <polygon class="cls-1" points=".5 .87 230.38 133.58 .5 266.3 .5 .87" />
        <path
          d="m1,1.73l228.38,131.85L1,265.44V1.73M0,0v267.17s231.38-133.58,231.38-133.58L0,0H0Z"
        />
      </g>
      <g id="body">
        <ellipse class="cls-1" cx="421.69" cy="135.65" rx="272" ry="133.5" />
        <path
          d="m421.69,2.65c149.71,0,271.5,59.66,271.5,133s-121.79,133-271.5,133-271.5-59.66-271.5-133S271.98,2.65,421.69,2.65m0-1c-150.5,0-272.5,59.99-272.5,134s122,134,272.5,134,272.5-59.99,272.5-134S572.19,1.65,421.69,1.65h0Z"
        />
      </g>
      <g id="eye">
        <circle class="cls-1" cx="545.69" cy="105.15" r="35" />
        <path
          d="m545.69,70.65c19.02,0,34.5,15.48,34.5,34.5s-15.48,34.5-34.5,34.5-34.5-15.48-34.5-34.5,15.48-34.5,34.5-34.5m0-1c-19.61,0-35.5,15.89-35.5,35.5s15.89,35.5,35.5,35.5,35.5-15.89,35.5-35.5-15.89-35.5-35.5-35.5h0Z"
        />
      </g>
    </g>
  </svg>
</div>

[Ennoriel]

Hi @jaewon1022

Your code seems OK. Are you in the context of a PWA? Can you make a minimal reproducible example?

For your information, the behavior of opening the native color picker is intentional when javascript fails (and it may happen when the page is not fully loaded)

[jaewon1022]

Hi @jaewon1022

Your code seems OK. Are you in the context of a PWA? Can you make a minimal reproducible example?

For your information, the behavior of opening the native color picker is intentional when javascript fails (and it may happen when the page is not fully loaded)

Yep. I'm using it at PWA and this is reproducible example. I've tested this by using ngrok.

https://github.com/jaewon1022/pwa-svelte

[Ennoriel]

Hello

This is not a minimal reproducible example. Can you please provide one?

[jaewon1022]

https://svelte.dev/repl/6351892e54e94746810835941ab52eb8?version=4.2.18

[Ennoriel]

Can you reproduce with this example on Android and iOS? This still seems very complex compared to what a minimal reproducible example can be.