search

scottohara / tvmanager

PWA for tracking recorded, watched & upcoming TV shows
MIT License
3 stars 0 forks source link

iOS7-style hairline borders for retina devices #59

Open scottohara opened 10 years ago

scottohara commented 10 years ago

1px lines on devices with device-pixel-ratio: 2 (ie. retina screens) become 2px lines.

One suggested solution is to use box-shadow with a negative spread, eg.

@media (-webkit-device-pixel-ratio: 2) {
  h1 {
    border-bottom: 0;
    box-shadow: 0 1px 1px -1px rgba(200, 199, 204, 0.5);
  }
}

I tried this and it didn't look particularly good.

Another approach is to use -webkit-transform: scaleY(0.5) to halve the vertical dimensions; however this requires all other vertical sizes to be doubled.

scottohara commented 9 years ago

IOS8 introduces support for subpixel layout. CSS values are now floats rather than integers, allowing for hairline borders eg.

div {
  border-width: 0.5px;
}