Line thickness of 0.5px (1 real pixel) on a retina display in mobile safari
css, iphone, mobile, safari
Solution
Use scale. The style below will give you hairline
.transform-border-hairline {
border-bottom: 1px #ff0000 solid;
transform: scaleY(0.5);
}
More specificly (and that trick in live use) here http://atirip.com/2013/09/22/yes-we-can-do-fraction-of-a-pixel/
Problem
How can I draw a line with mobile safari that is one real pixel wide on a retina display? I tried: `border-bottom:0.5px solid #fff;` and `border-bottom:0.05em solid #fff;` with different values between 0.01em and 0.1em. Mobile Safari always draws a line that is one pixel wide (2 pixels on a retina display) or none at all. How can I make mobile safari draw a line that is one real pixel (0.5px) wide ?