search

scottohara / tvmanager

PWA for tracking recorded, watched & upcoming TV shows
MIT License
4 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 10 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;
}