/ / Raio de borda CSS3 em questão quando a posição / dimensões não é uma largura inteira - javascript, css, css3

Problema de raio de borda CSS3 quando a posição / dimensões não é uma largura inteira - javascript, css, css3

Percebeu um problema com cantos arredondados em CSS3 quando uma posição e / ou dimensões não são um número inteiro. Não tenho certeza se é o navegador ou CSS relacionado.

Atualmente anexando um marcador a ícones no GoogleMaps. Às vezes, uma posição faz uma alteração muito pequena, fazendo com que a posição da etiqueta anexada (uma div com raio de borda CSS3) seja renderizada incorretamente. Dar uma olhada:

6 e 7 são rótulos div anexados aos marcadores GMaps

Observe como 6 está faltando a linha inferior de pixels que foi adicionada visualmente ao topo da div. Mas 7 é normal e completo.

Código relevante para anexar cada etiqueta:

// 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();
};

Quaisquer pensamentos ou correções? O problema é Javascript, GMaps, navegador ou CSS? Obrigado!

Respostas:

1 para resposta № 1

Use números inteiros ao posicionar com pixels, pois eles são uma medida absoluta.