使用CSS边框半径的带OpenLayers贴图的圆形div元素_Css_Browser_Operating System_Openlayers 3

使用CSS边框半径的带OpenLayers贴图的圆形div元素

css browser operating-system openlayers-3

使用CSS边框半径的带OpenLayers贴图的圆形div元素,css,browser,operating-system,openlayers-3,Css,Browser,Operating System,Openlayers 3,我在包含OpenLayers OL3映射的div元素上遇到了CSS border radius属性的问题。用.png背景替换贴图的div元素上的边界半径给出了所需的结果，因此这个问题特定于OL3情况。使用50%的边界半径可以为某些操作系统/浏览器组合提供圆形贴图，而不是其他操作系统/浏览器组合。具体来说，我有以下行为： Ubuntu Firefox-works，铬制品窗户 IE-works，铬-不起作用 Mac OSX/iOS Safari-在使用“显示所有选项卡”选项时起作用，但不起作用

我在包含OpenLayers OL3映射的div元素上遇到了CSS border radius属性的问题。用.png背景替换贴图的div元素上的边界半径给出了所需的结果，因此这个问题特定于OL3情况。使用50%的边界半径可以为某些操作系统/浏览器组合提供圆形贴图，而不是其他操作系统/浏览器组合。具体来说，我有以下行为：

Ubuntu Firefox-works，铬制品

窗户 IE-works，铬-不起作用

Mac OSX/iOS Safari-在使用“显示所有选项卡”选项时起作用，但不起作用，边界半径已应用，而在普通窗口视图中则不是这样，铬-不起作用

我在stackoverflow和web上搜索系统解决方案失败。我发现了WebKit CSS掩码攻击，但我希望可能有人知道潜在的问题是什么？考虑到OS/浏览器组合似乎发挥了一定作用，并且在OSX/iOS中，“显示所有选项卡”视图的行为与普通窗口不同

下面是一个JSFIDLE的链接，根据操作系统和浏览器的不同说明了问题是否存在。代码是：

HTML

我将非常感谢任何洞察这里可能发生的事情！谢谢

设置边界半径：50%；在class.ol视口中

我没有linux和mac可供检查。

它在我的浏览器中运行良好，因此无法测试，但您是否尝试将边界半径值从50%更改为300px？可能是问题事实上，我没有，所以谢谢你的建议；不过，我现在已经试过了，但仍然不起作用。@salahuddin:谢谢你的建议，我试过了，但仍然不起作用。CSS掩码破解效果很好，但我不确定为什么，因为这似乎不是一个纯粹的WebKit问题：例如，Chrome在Ubuntu上可以正常工作，Safari在show all tabs视图中也可以正常工作。虽然这个代码示例可能会回答这个问题，但最好对您的答案进行一些必要的解释。就目前情况而言，这个答案对未来的读者来说几乎没有任何价值。请原谅我没有提供解释，因为我对可能出现的问题仍然一无所知，而且我没有linux和mac，无法检查所有操作系统。

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

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

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,
    }),
});