Why is the toggle SVG reacting that way on iPhones, whereas it is working fine on Android devices, PC, laptops, etc?

Where could be the issue be?

SVG code:

<label className="themeToggle st-sunMoonThemeToggleBtn" type="checkbox">
  <input
    type="checkbox"
    id="themeToggle"
    className="themeToggleInput"
    checked={theme === "light"}
    onChange={toggleTheme}
  />
  <svg
    width="18"
    height="18"
    viewBox="0 0 20 20"
    fill={theme === "dark" ? "currentColor" : "currentColor"}
    stroke="none"
    className={`relative top-1 -ml-3 lg:ml-12 md:top-1.5 ${
      theme === "dark" ? "text-gray-300" : "text-gray-700"
    }`}
  >
    <mask id="moon-mask">
      <rect x="0" y="0" width="20" height="20" fill="white"></rect>
      <circle cx="11" cy="3" r="8" fill="black"></circle>
    </mask>
    <circle
      className="sunMoon"
      cx="10"
      cy="10"
      r="7"
      mask="url(#moon-mask)"
    ></circle>
    <g>
      <circle className="sunRay sunRay1" cx="18" cy="10" r="1.5"></circle>
      <circle className="sunRay sunRay2" cx="14" cy="16.928" r="1.5"></circle>
      <circle className="sunRay sunRay3" cx="6" cy="16.928" r="1.5"></circle>
      <circle className="sunRay sunRay4" cx="2" cy="10" r="1.5"></circle>
      <circle className="sunRay sunRay5" cx="6" cy="3.1718" r="1.5"></circle>
      <circle className="sunRay sunRay6" cx="14" cy="3.1718" r="1.5"></circle>
    </g>
  </svg>
</label>;

The meta viewport is:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

I don’t think there is much to try since the size is nearly the same for all mobile phones.