The browser renders the difference less than 1px

preface

Poor, too many things can not be measured, there are mistakes can be sprayed oh ~~~

On non-Retina screens, it would be a hassle if the design told us to have a border of.5px. It looks like only Safari (ios8+) supports border:.5px; , so we have the following four methods:

1. border: < 1px: Resigned to fate, usually hammered to death by the artist
2. Picture simulation: same as above
3. scale(In this article)
4. box-shadowI prefer this one. Actually, the principle is the same as Scale, it doesn’t occupy the position yet. I don’t know why it’s not used.

My colleague said that border 5px is thinner than height. I thought it was impossible at that time, but it looks really thinner. As a person who just heard the originality, I must try it!

The test case

Classification messy look good, the following classification analysis

// single general attribute div {width: 200px; transform: scaleY(.5); height: 1px; border-width: 1px }Copy the code

Analysis of the

Group 1 (first from left)

Compare the above and find:

1. 1,2 groups: border-color is affected by background-color color
2. 4 sets of examples to prove why border looks thinner than background (influenced by background color)
3. 2,3 groups: background-color is affected by the border-color color

Conclusion: When the browser is less than 1px, it will make the color lighter to form a visual zoom. Border-color and bakcground-color influence each other, and the color is close to each other. Bakcground-color influences border-color more than border-color influences background-color

Group 2 (second from left)

I changed the background color to green and found it was greener than the first group, so I tend to render pixel color less than 1px and the browser will calculate a visually smaller color based on the surrounding color according to XXXX algorithm.

Group 3 (third from left)

Adjust the size of scale, and the color becomes lighter compared to the first group, indicating that

conclusion

When the browser renders a pixel less than 1px, it dynamically computes visual colors less than 1px based on the size you set and the color of the pixels around it, and background-color computes more weight than border-color

The rest of the tests are written

The remaining two groups

I’ve written before that browsers use rounding for decimals, where the last element is added to the next element. This is not true. The first element in the fourth group is 1.4 pixels. I didn’t render 1px until I had adjusted it to 1.15px, which is the same as CSS matching order from back to front and bottom up:

1. 1.9px + 0.1px (-0.1)
2. 1.7px – 0.1px = 1.6px + 0.4px (-0.4)
3. 1.8px-0.4px = 1.4px-0.4px (+0.4)
4. 1.4px + 0.4px = 1.8px => 2px

Fourth group of conclusions

1. The browser uses rounding for decimals to two decimal places (maybe)
2. What was left out of the last element is added to the next element
3. The sequence matches the CSS (from back to front, from bottom to top)

Group 5 Conclusions

Calculation is based on the border-box height

For the shadow

box-shadow: 0 0 .5px 0 black;

Amazingly, this color is very light, even close to the third group fourth……….

Scratching broken head do not understand why is so calculated…. I really don’t know, but I can guess that the shadow needs to have a diffusion process so the color will gradually become lighter, so maybe the color will be darker in the calculation

conclusion

Making a browser is really cool, and this result is only on my computer, should be much the same, of course if ratine screen…

(‘ ω · ´) when I didn’t write, I guessed that a high DPR would work much better for this, but if the height is less than 1px/DPR and the pixels are not fully rendered, the color should be the same as above

Ahem… I’m just wondering why the border simulation is thinner than the height simulation

Anything you want to say please leave a message