Круговой элемент div с картой OpenLayers с использованием CSS border-radius

У меня возникают проблемы со свойством CSS border-radius в элементе div, который содержит карту OpenLayers (OL3). Радиус границы элемента div с заменой карты фоном .png дает желаемый результат, поэтому этот вопрос относится к случаю OL3. Использование радиуса границы 50% дает круговую карту для одних комбинаций операционной системы и браузера, но не для других. В частности, я получаю следующее поведение:

Ubuntu Firefox — работает, Chrome — работает

Windows IE — работает, Chrome — не работает

Mac OSX/iOS Safari — работает И не работает (при использовании параметра «показать все вкладки» ПРИМЕНЯЕТСЯ радиус границы, а не в обычном представлении окна), Chrome — не работает работай

Я безуспешно искал в stackoverflow и в Интернете систематические решения. Я нашел хак WebKit CSS Mask на Как чтобы закругленные углы CSS3 скрывали переполнение в Chrome/Opera, но я надеюсь, что, может быть, кто-то знает, в чем основная проблема? Учитывая, что комбинация ОС/браузер, по-видимому, играет роль и что в OSX/iOS представление «показать все вкладки» ведет себя иначе, чем обычное окно?

Вот ссылка на jsfiddle, иллюстрирующую проблему (или нет, в зависимости от ОС и браузера) http://jsfiddle.net/t0y9bbqw/. Код:

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

Буду очень признателен за любую информацию о том, что здесь может происходить! Спасибо!


operating-system browser css openlayers-3
person nb81    schedule 03.02.2015    source источник
comment
Он отлично работает в моем браузере, поэтому не могу проверить, но вы пытались изменить значения радиуса границы с 50% до 300 пикселей? может быть проблема   -  person Marcelo Luz    schedule 03.02.2015
comment
На самом деле, я этого не сделал, так что спасибо за предложение; однако я попробовал сейчас, и это все еще не работает.   -  person nb81    schedule 03.02.2015

Ответы (1)


arrow_upward
0
arrow_downward

установить border-radius:50%; в классе .ol-viewport

У меня нет с собой Linux и Mac, чтобы проверить.

person salahuddin    schedule 03.02.2015
comment
@salahuddin: спасибо за предложение, я пробовал, но все равно не работает. Взлом маски CSS работает хорошо, хотя я не уверен, почему, поскольку это, похоже, не только проблема WebKit: например, Chrome отлично работает в Ubuntu, а Safari также в представлении «Показать все вкладки». - person nb81; 03.02.2015
comment
Хотя этот пример кода может ответить на вопрос, было бы предпочтительнее включить в ваш ответ некоторые важные пояснения. В нынешнем виде этот ответ практически не имеет ценности для будущих читателей. - person oɔɯǝɹ; 03.02.2015
comment
извините меня за то, что я не дал объяснения, потому что я все еще не знаю, в чем может быть проблема, и у меня нет Linux и Mac, чтобы проверить все ОС. - person salahuddin; 04.02.2015