Leaflet control disapperars while dragging map on mobile(React)

Question

Currently doing a map with React-Leaflet. On desktop everthing works fine, but on mobile(iPhone X) the layercontrol and zoom control flicker/disappear while moving the map.

    function Osm() {
        const [map, setMap] = useState(null)
        return (<main>
            {map ? <header><img src={logo} />map <img id={'loc'} src={currentLoc} onClick={(e) => goToLoc(map)} /></header> : null}
            <MapContainer center={center as any} zoom={13} style={{ height: "100vh" }} zoomAnimation={false} fadeAnimation={false} markerZoomAnimation={false} doubleClickZoom={false}
                scrollWheelZoom={true} zoomControl={false} attributionControl={false} whenCreated={(map) => setMap(map as any)}>
                <TileLayer
                    attribution='<a href="https://www.maptiler.com" style="position:absolute;left:10px;bottom:10px;z-index:999;"><img src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>'
                    url="https://api.maptiler.com/maps/streets/256/{z}/{x}/{y}.png?key="
                    maxZoom={19}
                    minZoom={12}
                />
    
                <LayersControl position="topright" collapsed={false}>
                    <LayersControl.BaseLayer name="E5" checked>
                        <FeatureGroup key={'e5'}>
                            <TankstellenNoReactQuery fuel={'e5'} />
                        </FeatureGroup >
                    </LayersControl.BaseLayer >
                    <LayersControl.BaseLayer name="E10" >
                        <FeatureGroup key={'e10'}>
                            <TankstellenNoReactQuery fuel={'e10'} />
                        </FeatureGroup >
                    </LayersControl.BaseLayer>
                    <LayersControl.BaseLayer name="Diesel" >
                        <FeatureGroup key={'diesel'}>
                            <TankstellenNoReactQuery fuel={'diesel'} />
                        </FeatureGroup >
                    </LayersControl.BaseLayer>
                </LayersControl>
                <ZoomControl position='topleft' />
                {/* <ScaleControl metric={true} imperial={false} /> */}
                <AttributionControl position='bottomleft' prefix={false} />
                <MapHandler />
            </MapContainer>
        </main >
        )
    }

For the <main> I used display: flex with height: 100vh. But I dont think this is the orgin of the problem. Could this be a problem of webkit broweser or else. As far as I tested it, it only happends on a mobile device.

Thank you for your help

Carlo

Answer 1

As Falke Design said it is currently an issue with the package only affecting safari.

github.com/Leaflet/Leaflet/issues/8068