Question

Noticed an issue with rounded corners in CSS3 when a position and/or dimensions are not a whole number. Not sure if it’s browser or CSS related.

Currently attaching a label to icons on Google Maps. Sometimes a position makes a very slight change, causing the position of the attached label (a div with CSS3 border radius) to render improperly. Have a look:

Notice how 6 is missing the bottom row of pixels which has been added visually to the top of the div. But 7 is normal and whole.

Code relevant to attaching each label:

// Implement draw
Label.prototype.draw = function() {
     var projection = this.getProjection();
     var position = projection.fromLatLngToDivPixel(this.get('position'));
     var div = this.div_;
     div.style.left = position.x + 'px';
     div.style.top = position.y + 'px';
     div.style.display = this.get('display');
     div.style.zIndex = this.get('zIndex'); //ALLOW LABEL TO OVERLAY MARKER
     this.span_.innerHTML = this.get('text').toString();
};

Any thoughts or fixes? Is the problem Javascript, GMaps, browser, or CSS? Thanks!

Answer 1

Use whole numbers when positioning with pixels as they are an absolute measurement.