ol.Overlay bug

by Simon Seyock

HTML

<script src="http://ol3js.org/en/master/build/ol.js"></script>
<div class="map" id="map"></div>

CSS

.map {
        height: 400px;
        width: 100%;
}

.label {
    background-color: white;
}

JavaScript

var layers = [new ol.layer.Tile({
    source: new ol.source.MapQuest({layer: 'sat'})
})];

var center = ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857');

var view = new ol.View({
    center: center,
    zoom: 4
});
    
var overlays = [
    new ol.Overlay({
        element: $("<div class='label'>top left</div>").get(0),
        position: center,
        positioning: "top-left",
        offset: [-200,-200]
    }),
    new ol.Overlay({
        element: $("<div class='label'>center center</div>").get(0),
        position: center,
        positioning: "center-center",
        offset: [-100,-100]
    }),
    new ol.Overlay({
        element: $("<div class='label'>bottom right</div>").get(0),
        position: center,
        positioning: "bottom-right",
        offset: [100,100]
    }),    
    new ol.Overlay({
        element: $("<div class='label'>bottom center</div>").get(0),
        position: center,
        positioning: "bottom-center",
        offset: [200,200]
    }),
    new ol.Overlay({
        element: $("<div class='label'>center right</div>").get(0),
        position: center,
        positioning: "center-right",
        offset: [200,200]
    })
];



var map = new ol.Map({
    layers: layers,
    view: view,
    overlays: overlays,
    target: "map"
});