2

Hello i got this problem i got website that on 100% zoom looks normal but when i zoom to 110% + borders starts act weird way. On some of the borders thickness is rendered 2x its actual size and some of them are deformed.

Here is the first example

enter image description here

Anyone know what could cause this? When i check values on those they are 1px solid unchanged but they are rendered like 2px.

Thank you for your help.

Mitre
  • 273
  • 1
  • 3
  • 11

2 Answers2

7

its because of browser, when usinng zoom in browser it will only render how it would look like at choosen zoom level, so if you have 1px border at 110% its 1.1px border. Since you cant show only part of a pixel, it will show either 1px or 2px

Pepo_rasta
  • 2,842
  • 12
  • 20
  • 1
    Ok but why its affectig only some of the borders or part of it and not every line? – Mitre Aug 24 '15 at 14:17
  • 1
    well, it has something to do with browser deciding when to show subpixel or not, even different browsers show subpixels different ways, you can try set border to `0.1px` then ff will show it 1px even zoomed but chrome will not show it at all – Pepo_rasta Aug 24 '15 at 14:26
0

following up what @pepo_rasta said about pixels i would recommend not using them at all. I would recommend em or some other relative unity to do your borders in for scaleability

have a look at this

ems v px

Kieranmv95
  • 828
  • 4
  • 14
  • 31