3

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%:

vídeo afeta pixels conforme zoom, um exemplo com 175% de zoom no navegador

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%:

windows 10 configurado para usar o tamanho da fonte a 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 +, mas estou querendo resolver o problema de elementos HTML simples.

1 Resposta 1

1

Coincidentemente, por você ter mencionado seu colega usar 125% de escala em todo o Windows, eu uso um zoom de 125% no Chrome aqui no SOpt. Isso porque meu monitor é fullHD e no zoom normal o site fica muito pequeno e ruim de ler, e 125% fica num tamanho bom de visualizar nesse monitor.

Ao executar o snippet da pergunta, realmente o menu hambúrguer aparece como descrito: a linha do meio fica com 3 pixels, e as outras duas com os 2 pixels especificados no CSS, que seria o normal.

Mas analisando a situação, creio não ser possível evitar essa distorção. Como mencionado, em telas com alta densidade de pixels (creio eu) isso não ocorre, mas nesses monitores, ditos "normais", essa distorção ocorre porque ao fazer o zoom, o navegador arredonda valores com decimais. Da mesma forma, se você especificar uma div com width de 100.5px, o navegador irá renderizar uma div com 101px.

Veja abaixo um print onde o navegador diz que a div tem 100.5px (que foi declarado no CSS) mas ao medir no Photoshop, na verdade a div possui 101px de largura:

inserir a descrição da imagem aqui

Bom, creio que isso já é sabido que o Navegador arredonda valores para o primeiro inteiro maior quando o valor possui de .5 pra cima e para menor de .4 pra baixo.

Só para analisar rapidamente o hambúrguer do seu exemplo, ele tem 34px de altura. Ao aplicar um zoom de 125% na tela, ele irá ganhar 1/4 (um quarto) de altura, ou seja, irá ficar com 42.5px, e o navegador irá arredondar pra 43px.

Os paddings top e bottom, de 10px, passam a ter 12.5px, arredondando para 13px. Com isso, os 43px de altura menos os 26px dos paddings, restam 17px. Os margin-top da segunda e terceira linha passam a ser de 5px (4px + 25% = 5px), logo os 17px restantes menos os 10px dos paddings, restam 7px para as 3 linhas. Nesse caso cada linha deveria ter 3px de altura, já que 2px + .5px = 2.5px, arredondando pra 3px. Só que se cada linha tiver 3px, iria ultrapassar os 7px que sobraram. Com isso o navegador deixou a primeira e terceira linha com os 2px originais e colocou 3px na linha do meio, totalizando os 7px.

Pra concluir, como já dito, não é possível evitar isso. Ao aplicar um zoom na página, os elementos serão reajustados dentro da área da janela levando em consideração as novas dimensões aplicadas pelo zoom, seguindo as regras de renderização do CSS/HTML do navegador e, creio também, a capacidade do monitor, já que foi mencionado que em telas retina isso não ocorre.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .