Totally same linear-gradient lines looks different
up vote
0
down vote
favorite
Why is it like this?
Codepen example:
https://codepen.io/bofemptiness/pen/PxGePa?page=1&
The problem is more about why same lines are different, not a scale.
css:
.hr
width: 100%;
margin:10px;
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 65%), rgba(0, 0, 0, 0));
border: 0;
height: 1px;
padding: 0;
font-size: 16px;
display: inline-block;
If I make height: 0.8px; with normal PC scale 100% some lines will just disappear..
P.S. Laptops is scaled 125% by default:
html css
edited Nov 11 at 21:09
dmcgrandle
1,099415
asked Nov 11 at 17:29
RTW TMI
18811
|
show 2 more comments
up vote
0
down vote
favorite
Why is it like this?
Codepen example:
https://codepen.io/bofemptiness/pen/PxGePa?page=1&
The problem is more about why same lines are different, not a scale.
css:
.hr
width: 100%;
margin:10px;
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 65%), rgba(0, 0, 0, 0));
border: 0;
height: 1px;
padding: 0;
font-size: 16px;
display: inline-block;
If I make height: 0.8px; with normal PC scale 100% some lines will just disappear..
P.S. Laptops is scaled 125% by default:
html css
edited Nov 11 at 21:09
dmcgrandle
1,099415
asked Nov 11 at 17:29
RTW TMI
18811
1
Worked for me (Chrome/OSX). In which browser and OS are you testing ?
– Niloct
Nov 11 at 17:38
chrome. notebok. windows 10 scale 125% (standart notebok scale)
– RTW TMI
Nov 11 at 17:51
just scale and you will see the problem
– RTW TMI
Nov 11 at 17:53
Dont scale then lol
– Lawrence Cherone
Nov 11 at 17:58
1
you can set initial scale via meta tags to prevent it.
– Lawrence Cherone
Nov 11 at 18:03
|
show 2 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
Why is it like this?
Codepen example:
https://codepen.io/bofemptiness/pen/PxGePa?page=1&
The problem is more about why same lines are different, not a scale.
css:
.hr
width: 100%;
margin:10px;
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 65%), rgba(0, 0, 0, 0));
border: 0;
height: 1px;
padding: 0;
font-size: 16px;
display: inline-block;
If I make height: 0.8px; with normal PC scale 100% some lines will just disappear..
P.S. Laptops is scaled 125% by default:
html css
edited Nov 11 at 21:09
dmcgrandle
1,099415
asked Nov 11 at 17:29
RTW TMI
18811
Why is it like this?
Codepen example:
https://codepen.io/bofemptiness/pen/PxGePa?page=1&
The problem is more about why same lines are different, not a scale.
css:
.hr
width: 100%;
margin:10px;
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 65%), rgba(0, 0, 0, 0));
border: 0;
height: 1px;
padding: 0;
font-size: 16px;
display: inline-block;
If I make height: 0.8px; with normal PC scale 100% some lines will just disappear..
P.S. Laptops is scaled 125% by default:
html css
html css
edited Nov 11 at 21:09
dmcgrandle
1,099415
asked Nov 11 at 17:29
RTW TMI
18811
edited Nov 11 at 21:09
dmcgrandle
1,099415
asked Nov 11 at 17:29
RTW TMI
18811
edited Nov 11 at 21:09
dmcgrandle
1,099415
edited Nov 11 at 21:09
dmcgrandle
1,099415
edited Nov 11 at 21:09
dmcgrandle
1,099415
1,099415
asked Nov 11 at 17:29
RTW TMI
18811
asked Nov 11 at 17:29
RTW TMI
18811
asked Nov 11 at 17:29
RTW TMI
18811
18811
1
Worked for me (Chrome/OSX). In which browser and OS are you testing ?
– Niloct
Nov 11 at 17:38
chrome. notebok. windows 10 scale 125% (standart notebok scale)
– RTW TMI
Nov 11 at 17:51
just scale and you will see the problem
– RTW TMI
Nov 11 at 17:53
Dont scale then lol
– Lawrence Cherone
Nov 11 at 17:58
1
you can set initial scale via meta tags to prevent it.
– Lawrence Cherone
Nov 11 at 18:03
|
show 2 more comments
1
Worked for me (Chrome/OSX). In which browser and OS are you testing ?
– Niloct
Nov 11 at 17:38
chrome. notebok. windows 10 scale 125% (standart notebok scale)
– RTW TMI
Nov 11 at 17:51
just scale and you will see the problem
– RTW TMI
Nov 11 at 17:53
Dont scale then lol
– Lawrence Cherone
Nov 11 at 17:58
1
you can set initial scale via meta tags to prevent it.
– Lawrence Cherone
Nov 11 at 18:03
1
1
Worked for me (Chrome/OSX). In which browser and OS are you testing ?
– Niloct
Nov 11 at 17:38
Worked for me (Chrome/OSX). In which browser and OS are you testing ?
– Niloct
Nov 11 at 17:38
chrome. notebok. windows 10 scale 125% (standart notebok scale)
– RTW TMI
Nov 11 at 17:51
chrome. notebok. windows 10 scale 125% (standart notebok scale)
– RTW TMI
Nov 11 at 17:51
just scale and you will see the problem
– RTW TMI
Nov 11 at 17:53
just scale and you will see the problem
– RTW TMI
Nov 11 at 17:53
Dont scale then lol
– Lawrence Cherone
Nov 11 at 17:58
Dont scale then lol
– Lawrence Cherone
Nov 11 at 17:58
1
1
you can set initial scale via meta tags to prevent it.
– Lawrence Cherone
Nov 11 at 18:03
you can set initial scale via meta tags to prevent it.
– Lawrence Cherone
Nov 11 at 18:03
|
show 2 more comments
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
On my machine (MacBook with Retina display) it looks ok as long as I have set the browser's scaling to 100%. The Retina scaling is 200%. Therefore, the lines will be exactly 2 physical pixels high and exactly fit on them.
When I modify the browser scaling, I get similar results like you. No the lines are 1.8 pixels high (at 90% scaling), 37.8 pixels apart and no longer fit on the grid of the physical pixels.
So what you're seeing is an aliasing effect that's difficult to avoid when you're close to the screens resolution. You'll have to find a different design, e.g. use wider lines and a lighter color.
answered Nov 11 at 17:38
Codo
50.2k11110147
but why are they different from each other? They all then should be small or big.
– RTW TMI
Nov 11 at 17:52
1
They're different because for some of the lines, the "logical" pixels are landing squarely on the physical pixels, but on others, they're straddling two rows of physical pixels, and so they get antialiased. You could do a media query for device pixel ratio and adjust the pixel height of your hr's accordingly.
– Thomas Peri
Nov 11 at 18:28
@Thomas Peri can you give example how to do it?
– RTW TMI
Nov 11 at 18:40
1
Unfortunately I don't have a working way of solving your specific problem. And actually, since the scale level can be an arbitrary user-assigned number as opposed to a list of common ratios in known devices, a CSS media query won't be any help. Take a look at the value ofwindow.devicePixelRatioin your browser using JavaScript. If its value changes according to the zoom you set, then you can divide by that number to calculate the pixel height you need. However, it probably won't work: stackoverflow.com/questions/42569455/…
– Thomas Peri
Nov 11 at 19:31
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
On my machine (MacBook with Retina display) it looks ok as long as I have set the browser's scaling to 100%. The Retina scaling is 200%. Therefore, the lines will be exactly 2 physical pixels high and exactly fit on them.
When I modify the browser scaling, I get similar results like you. No the lines are 1.8 pixels high (at 90% scaling), 37.8 pixels apart and no longer fit on the grid of the physical pixels.
So what you're seeing is an aliasing effect that's difficult to avoid when you're close to the screens resolution. You'll have to find a different design, e.g. use wider lines and a lighter color.
answered Nov 11 at 17:38
Codo
50.2k11110147
but why are they different from each other? They all then should be small or big.
– RTW TMI
Nov 11 at 17:52
1
They're different because for some of the lines, the "logical" pixels are landing squarely on the physical pixels, but on others, they're straddling two rows of physical pixels, and so they get antialiased. You could do a media query for device pixel ratio and adjust the pixel height of your hr's accordingly.
– Thomas Peri
Nov 11 at 18:28
@Thomas Peri can you give example how to do it?
– RTW TMI
Nov 11 at 18:40
1
Unfortunately I don't have a working way of solving your specific problem. And actually, since the scale level can be an arbitrary user-assigned number as opposed to a list of common ratios in known devices, a CSS media query won't be any help. Take a look at the value ofwindow.devicePixelRatioin your browser using JavaScript. If its value changes according to the zoom you set, then you can divide by that number to calculate the pixel height you need. However, it probably won't work: stackoverflow.com/questions/42569455/…
– Thomas Peri
Nov 11 at 19:31
add a comment |
up vote
1
down vote
accepted
On my machine (MacBook with Retina display) it looks ok as long as I have set the browser's scaling to 100%. The Retina scaling is 200%. Therefore, the lines will be exactly 2 physical pixels high and exactly fit on them.
When I modify the browser scaling, I get similar results like you. No the lines are 1.8 pixels high (at 90% scaling), 37.8 pixels apart and no longer fit on the grid of the physical pixels.
So what you're seeing is an aliasing effect that's difficult to avoid when you're close to the screens resolution. You'll have to find a different design, e.g. use wider lines and a lighter color.
answered Nov 11 at 17:38
Codo
50.2k11110147
but why are they different from each other? They all then should be small or big.
– RTW TMI
Nov 11 at 17:52
1
They're different because for some of the lines, the "logical" pixels are landing squarely on the physical pixels, but on others, they're straddling two rows of physical pixels, and so they get antialiased. You could do a media query for device pixel ratio and adjust the pixel height of your hr's accordingly.
– Thomas Peri
Nov 11 at 18:28
@Thomas Peri can you give example how to do it?
– RTW TMI
Nov 11 at 18:40
1
Unfortunately I don't have a working way of solving your specific problem. And actually, since the scale level can be an arbitrary user-assigned number as opposed to a list of common ratios in known devices, a CSS media query won't be any help. Take a look at the value ofwindow.devicePixelRatioin your browser using JavaScript. If its value changes according to the zoom you set, then you can divide by that number to calculate the pixel height you need. However, it probably won't work: stackoverflow.com/questions/42569455/…
– Thomas Peri
Nov 11 at 19:31
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
On my machine (MacBook with Retina display) it looks ok as long as I have set the browser's scaling to 100%. The Retina scaling is 200%. Therefore, the lines will be exactly 2 physical pixels high and exactly fit on them.
When I modify the browser scaling, I get similar results like you. No the lines are 1.8 pixels high (at 90% scaling), 37.8 pixels apart and no longer fit on the grid of the physical pixels.
So what you're seeing is an aliasing effect that's difficult to avoid when you're close to the screens resolution. You'll have to find a different design, e.g. use wider lines and a lighter color.
answered Nov 11 at 17:38
Codo
50.2k11110147
On my machine (MacBook with Retina display) it looks ok as long as I have set the browser's scaling to 100%. The Retina scaling is 200%. Therefore, the lines will be exactly 2 physical pixels high and exactly fit on them.
When I modify the browser scaling, I get similar results like you. No the lines are 1.8 pixels high (at 90% scaling), 37.8 pixels apart and no longer fit on the grid of the physical pixels.
So what you're seeing is an aliasing effect that's difficult to avoid when you're close to the screens resolution. You'll have to find a different design, e.g. use wider lines and a lighter color.
answered Nov 11 at 17:38
Codo
50.2k11110147
answered Nov 11 at 17:38
Codo
50.2k11110147
answered Nov 11 at 17:38
Codo
50.2k11110147
answered Nov 11 at 17:38
Codo
50.2k11110147
50.2k11110147
but why are they different from each other? They all then should be small or big.
– RTW TMI
Nov 11 at 17:52
1
They're different because for some of the lines, the "logical" pixels are landing squarely on the physical pixels, but on others, they're straddling two rows of physical pixels, and so they get antialiased. You could do a media query for device pixel ratio and adjust the pixel height of your hr's accordingly.
– Thomas Peri
Nov 11 at 18:28
@Thomas Peri can you give example how to do it?
– RTW TMI
Nov 11 at 18:40
1
Unfortunately I don't have a working way of solving your specific problem. And actually, since the scale level can be an arbitrary user-assigned number as opposed to a list of common ratios in known devices, a CSS media query won't be any help. Take a look at the value ofwindow.devicePixelRatioin your browser using JavaScript. If its value changes according to the zoom you set, then you can divide by that number to calculate the pixel height you need. However, it probably won't work: stackoverflow.com/questions/42569455/…
– Thomas Peri
Nov 11 at 19:31
add a comment |
but why are they different from each other? They all then should be small or big.
– RTW TMI
Nov 11 at 17:52
1
They're different because for some of the lines, the "logical" pixels are landing squarely on the physical pixels, but on others, they're straddling two rows of physical pixels, and so they get antialiased. You could do a media query for device pixel ratio and adjust the pixel height of your hr's accordingly.
– Thomas Peri
Nov 11 at 18:28
@Thomas Peri can you give example how to do it?
– RTW TMI
Nov 11 at 18:40
1
Unfortunately I don't have a working way of solving your specific problem. And actually, since the scale level can be an arbitrary user-assigned number as opposed to a list of common ratios in known devices, a CSS media query won't be any help. Take a look at the value ofwindow.devicePixelRatioin your browser using JavaScript. If its value changes according to the zoom you set, then you can divide by that number to calculate the pixel height you need. However, it probably won't work: stackoverflow.com/questions/42569455/…
– Thomas Peri
Nov 11 at 19:31
but why are they different from each other? They all then should be small or big.
– RTW TMI
Nov 11 at 17:52
but why are they different from each other? They all then should be small or big.
– RTW TMI
Nov 11 at 17:52
1
1
They're different because for some of the lines, the "logical" pixels are landing squarely on the physical pixels, but on others, they're straddling two rows of physical pixels, and so they get antialiased. You could do a media query for device pixel ratio and adjust the pixel height of your hr's accordingly.
– Thomas Peri
Nov 11 at 18:28
They're different because for some of the lines, the "logical" pixels are landing squarely on the physical pixels, but on others, they're straddling two rows of physical pixels, and so they get antialiased. You could do a media query for device pixel ratio and adjust the pixel height of your hr's accordingly.
– Thomas Peri
Nov 11 at 18:28
@Thomas Peri can you give example how to do it?
– RTW TMI
Nov 11 at 18:40
@Thomas Peri can you give example how to do it?
– RTW TMI
Nov 11 at 18:40
1
1
Unfortunately I don't have a working way of solving your specific problem. And actually, since the scale level can be an arbitrary user-assigned number as opposed to a list of common ratios in known devices, a CSS media query won't be any help. Take a look at the value of
window.devicePixelRatio in your browser using JavaScript. If its value changes according to the zoom you set, then you can divide by that number to calculate the pixel height you need. However, it probably won't work: stackoverflow.com/questions/42569455/…– Thomas Peri
Nov 11 at 19:31
Unfortunately I don't have a working way of solving your specific problem. And actually, since the scale level can be an arbitrary user-assigned number as opposed to a list of common ratios in known devices, a CSS media query won't be any help. Take a look at the value of
window.devicePixelRatio in your browser using JavaScript. If its value changes according to the zoom you set, then you can divide by that number to calculate the pixel height you need. However, it probably won't work: stackoverflow.com/questions/42569455/…– Thomas Peri
Nov 11 at 19:31
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53251336%2ftotally-same-linear-gradient-lines-looks-different%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Worked for me (Chrome/OSX). In which browser and OS are you testing ?
– Niloct
Nov 11 at 17:38
chrome. notebok. windows 10 scale 125% (standart notebok scale)
– RTW TMI
Nov 11 at 17:51
just scale and you will see the problem
– RTW TMI
Nov 11 at 17:53
Dont scale then lol
– Lawrence Cherone
Nov 11 at 17:58
1
you can set initial scale via meta tags to prevent it.
– Lawrence Cherone
Nov 11 at 18:03