HTML & CSS Border-Radius doesn't work on mobile browsers

[gustavQ]

Hello everyone,

I am looking for some help to understand a behavior between desktop and mobile browsers.
If I apply the code below to a map requested from mapboxgl api the div is show with the required border-radius on desktop browsers.
However, when I am testing it on mobile ones the border-radius is not there anymore.

Is there any obvious reason why is this the case?
Or, is the mapbox-gl.css have anything to do with this particular behavior?

<div class="parent__container">
    <div class="child__map">
        <!-- request map -->
    </div>
</div>

.parent__container {
    display: flex;
    overflow: hidden;
    border: none;
    border-radius: 10px;
}

.child__map {
    flex: 1;
}

Thank you very much for your support.

 

[Johna]

What browser and browser version are you using?

 

[gustavQ]

Oh sorry, I should have mentioned that.
I am using my iphone to test it with the latest iOS version. Right now don't know exactly the browers version that I am using, but on the desktop I tried with safari (not the latest), chrome (latest) and firefox (latest). The mobile that I try are: safari (latest), chrome (latest), both don't show the border-radius.
I am still developing so the testing happens in a local network environment.
I have also other childs inside the parent with img tag and the border-radius works properly here.
The only one that is not is the one that contains the map.