Notei em uma simples situação que elementos com pixel nem sempre são renderizados como se imagina, um exemplo simples é quando a pessoa ajusta o zoom do navegador para mais ou menos de 100%, fazendo com que dependendo da posição e zoom um elemento de altura igual ao outro pareça ser um pixel menor, um exemplo é o próprio menu do site StackOverflow, exemplo com zoom de 175%:
Pode notar que a ultima barra do menu "parece" maior e que o espaçamento da primeira e segunda barra também parece maior.
Entenda que isto não ocorre só nesta medida de 175% e não é somente com zoom, testei em um notebook de um colega com Windows10 e placa GeForce® GTX 1050
(claro que entendo que em parte computadores modernos renderizam com a "placa integrada") e ele usa nas configurações do Windows para o sistema operacional todo o valor de 125%:
Ao usar isto percebi em diversos locais o mesmo problema com zoom, os unicos displays que notei que o problema não ocorre são os de telas/ecrãs retina e "tecnologias" semelhantes, isto porque usam uma densidade pixels é maior.
Mas a pergunta NÃO é sobre monitores, telas e tecnologias do mercado, a pergunta é sobre como evitar o problema em telas normais quando o usuário ajusta algo, como no exemplo do 125% no Windows10, notando que isso varia conforme a resolução e até mesmo o monitor e é "imprevisível".
Tentei trabalhar com outras unidades de medida (em
, pt
, rem
, %
), mas o problema persistiu.
Então lá vai a minha pergunta:
- Como evitar a distorção de pixels em elementos HTML em configurações de tela/ecrã variadas?
Um exemplo que o problema ocorre (se alterar as configurações de display ou o zoom do navegador):
*, ::after, ::before {
box-sizing: border-box;
}
body {
background-color: #007bff;
}
.v-navbar-toggle {
vertical-align: middle;
position: relative;
cursor: pointer;
display: inline-block;
background: none;
outline: 0;
border: none;
padding: 10px 8px;
color: #fff;
margin: 0;
}
.v-icon-bar {
background-color: currentColor;
overflow: hidden;
display: block;
width: 24px;
height: 2px;
border-radius: 1px;
}
.v-icon-bar+.v-icon-bar {
margin-top: 4px;
}
<button class="v-navbar-toggle">
<i class="v-icon-bar"></i>
<i class="v-icon-bar"></i>
<i class="v-icon-bar"></i>
</button>
Nota: Eu também notei que com SVG (dependendo de com usa) ou icon-fonts isto funciona um pouco melhor se comparado ao html+css, mas estou querendo resolver o problema de elementos HTML simples.