Circular div element with OpenLayers map using CSS border-radius

Question

I am encountering issues with the CSS border-radius property on a div element that contains an OpenLayers (OL3) map. The border-radius on a div element with the map replaced by a .png background gives the desired result, so this question is specific to the OL3 case. Using a border-radius of 50% gives a circular map for some operating system/browser combinations, not for others. Specifically I get the following behaviour:

Ubuntu Firefox - works, Chrome - works

Windows IE - works, Chrome - doesn't work

Mac OSX/iOS Safari - works AND doesn't work (when using the "show all tabs" option, the border-radius IS APPLIED, not so in normal window view), Chrome - doesn't work

I have unsuccessfully searched stackoverflow and the web for systematic solutions. I have found the WebKit CSS Mask hack on How to make CSS3 rounded corners hide overflow in Chrome/Opera, but I am hoping that maybe somebody has an idea of what the underlying issue is? Given that the OS/browser combination seems to play a role and that in OSX/iOS the "show all tabs" view behaves differently from the normal window?

Here is a link to a jsfiddle illustrating the problem (or not, depending on OS and browser) http://jsfiddle.net/t0y9bbqw/. The code is:

HTML

 <body>
 <div id="map" class=map></div>
 </body>

CSS

.map {
  height:600px;
  width: 600px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  overflow:hidden;
  margin:auto;
  position:relative;
}

JS

var my_layer = new ol.layer.Tile({
    source: new ol.source.MapQuest({layer: 'sat'})
})

var map = new ol.Map({
    target: 'map',
    layers: [my_layer],
    view: new ol.View({
        center: [-12245.6653498,6704064.05491],
        zoom: 10,
    }),
});

I would be very grateful for any insight into what might be going on here! Thanks!

It works fine in my browser so cant test but have you tried changing the border-radius values from 50% to 300px? could be the issue — Marcelo Luz, Feb 03 '15 at 02:34
In fact, I hadn't, so thanks for the suggestion; however, I have tried now, and it still doesn't work. — nb81, Feb 03 '15 at 11:11

salahuddin · Answer 1 · 2015-02-04T05:30:19.157

0

set border-radius:50%; in class .ol-viewport

I don't have linux and mac with me to check across.

edited Feb 04 '15 at 05:30

answered Feb 03 '15 at 12:45

salahuddin

248
2
11

@salahuddin: thanks for the suggestion, I tried this, but it still doesn't work. The CSS mask hack works well, I am unsure why though, as it seems to be not purely a WebKit issue: Chrome works fine on Ubuntu for example, and Safari in the "show all tabs" view as well. – nb81 Feb 03 '15 at 15:05
While this code sample may possibly answer the question, it would be preferable to include some essential explanation to your answer. As it stands now this answer adds little to no value for future readers. – oɔɯǝɹ Feb 03 '15 at 20:50
pardon me for not providing the explanation because I am still clueless as what might be issue and II don't have linux and mac with me to check across all OS. – salahuddin Feb 04 '15 at 05:29

Circular div element with OpenLayers map using CSS border-radius

1 Answers1