the mapbox.gl.js map component in my web app is behaving in a rather strange way on mobile. On my machine, using brave's device toolbar, it looks and behaves correctly; unfortunately once deployed, on mobile devices, it comes off as visually stretched as if to cover a longer screen, while this unexpected behavior manifests itself all the interactive components of the map behave as expected.
This, for example, is how the app looks like on my machine:
While this is how it looks like on mobile (i used photoshop to visually replicate the effect)
On mobile all the hitboxes work just fine, triggering the right event if the user clicks in the right place, for example, if the user clicked on the place where the Mapbox icon is supposed to be in the first photo the right thing will happen: they will be redirected to the mapbox website. Unfortunately they would have to know where the Mapbox icon is supposed to be to do that and at the moment they can't see it.
The web app has thousands of lines of code that have nothing to do with the map, therefore, what follows is the part of the code that generates the map.
import * as React from 'react';
import './PATH_TO/map.sass';
import ReactMapGL from 'react-map-gl';
import './PATH_TO/mapbox-gl.css';
interface Props {
mapStyle: string;
}
interface State {
longitude: number;
latitude: number;
};
export default class Map extends React.Component<Props, State> {
state: State = {
longitude: 12,
latitude: 41,
};
constructor(props: Props){
super(props);
}
_onViewportChange = (viewport: State) => {
this.setState(viewport);
}
render () {
return (
<ReactMapGL
{...this.state} onViewportChange={this._onViewportChange}
width="100%"
height="100%"
mapStyle={this.props.mapStyle}
mapboxApiAccessToken="<MY_TOKEN>"
>
</ReactMapGL>
);
}
}
While doing my research about this unexpected behavior, I stumbled upon the suggestion to add the official Mapbox CSS file, I've imported it already and, at least to this point, it does does not seem like the issue has desisted.