Switch component is not rendering correctly on some very small screens

[JohnMSykes]

Flux version

v1.1.2

Livewire version

v3.5.18

What is the problem?

The Switch component does not seem to render the active/on state correctly on some very small screens, e.g., iPhone 13 Pro running a public beta of iOS 18.3, etc.

An example of an "Off" and "On" switch as seen at challenge.domestiq.net - you can register for free and see a switch at the bottom of this route/page: challenge.domestiq.net/search

And on an iPad Pro M4 it shows correctly, as well as showing correctly on various Mac and Windows browsers:

This behavior was observed on Firefox and Safari on both of the Apple mobile devices.

Not sure how to troubleshoot this. All other used components seem to render correctly (note use of nav bar and other elements)

We do observe that when the the Nav Bar's profile drop down is accessed, it causes a secondary interior scroll bar to appear on Edge and Firefox on Windows 11 and a slight judder/shifting of the entire DOM content. This is not seen on other mobile device.

Code snippets

Component

<?php

namespace App\Livewire;

use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Session;
use Livewire\Component;

class ButtonHideInlineCharts extends Component
{
    public ?User $user = null;
    public bool $hideInlineCharts = false;

    public function mount()
    {
        // Manage the hideInlineCharts preference and state
        if (Session::get('hideInlineCharts') === null) {
            Session::put('hideInlineCharts', $this->hideInlineCharts);
        }
        $this->hideInlineCharts = Session::get('hideInlineCharts');
    }

    public function render()
    {
        return view('livewire.button-hide-inline-charts');
    }

    public function setHideInlineChartsPref(): void
    {
        $this->hideInlineCharts = ! Session::get('hideInlineCharts');

        Session::put('hideInlineCharts', $this->hideInlineCharts);
        $this->dispatch('hideInlineCharts');
    }
}

Blade

<div
    x-data="{ hideInlineCharts: $wire.entangle('hideInlineCharts') }"
    class="mt-6 flex justify-center">
    <flux:switch
        x-on:click="removeFocus();"
        wire:click="setHideInlineChartsPref"
        wire:model.live="hideInlineCharts"
        label="Hide Class Profile Charts" />
</div>

How do you expect it to work?

It should display a black background and a white ball as shown in the iPad image, and here:

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[JohnMSykes]

A colleague of mine notes that it is rendering correctly on an iPhone 16 Pro Max:

I am running a beta of iOS 18.3: