Menu
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 ?
949
0.5px is valid and it works. @Vincent Browser-dependent. Chrome 70 treats subpixel values as 1px, for instance, even on hidpi displays.
Fractional pixels are actually quite useful as a 0.5px border should round up to 1px at 1.0 scale factor, and remain 1px (as thin as possible) at 1.5 or 2.0 scale. Even on regular DPI devices where 1 physical px = 1 css px, you could render half pixels by using the provided color and applying 50% transparency.
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/
103
border-width: 0.5px
Safari 8 (in both iOS and OS X) brings border-width: 0.5px. You can use that if you’re ready to accept that current versions of Android and old versions of iOS and OS X will just show a regular border (a fair compromise in my opinion).
You can’t use this directly though, because browsers that don’t know about 0.5px borders will interpret it as 0px. No border. So what you need to do is add a class to your <html> element when it is supported:
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var testElem = document.createElement('div');
testElem.style.border = '.5px solid transparent';
document.body.appendChild(testElem);
if (testElem.offsetHeight == 1)
{
document.querySelector('html').classList.add('hairlines');
}
document.body.removeChild(testElem);
}
// This assumes this script runs in <body>, if it runs in <head> wrap it in $(document).ready(function() { })
Then, using retina hairlines becomes really easy:
div {
border: 1px solid #bbb;
}
.hairlines div {
border-width: 0.5px;
}
Best of all, you can use border-radius with it. And you can use it with the 4 borders (top/right/bottom/left) as easily.
Source: http://dieulot.net/css-retina-hairline
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
