Search code examples
cssborderresolution

1px elements disappear unless zooming in or out based on (text) line count

So I have a pretty basic issue this time, but it's one I haven't seemed to have found a solution for despite looking at other answers.

The basic issue is that I have a div for containing text that has a 15px padding + 1px border set to it. Whenever I have an uneven number of lines in the div, the bottom border disappears; if there's an even number of lines, it doesn't. The simple solution would be to simply have an even number of lines and call it a day, but the problem is that I'm designing this to be used by other people, and most of them won't know that an even number of lines is required for that slot or the bug won't happen. Is there any way I can fix this in a way that would allow for others to use it and not have to worry about the line count?

I used to have a similar issue involving webkit animations causing borders to become fuzzy before and after transitions (i solved it by adding a webkit blur filter at 0px) but that doesn't work here... Thank you :~(

code snippet (you can see the rest in the jsfiddle):

#sidebar {
position:fixed;
width:200px;
padding:15px;
background-color:#fff;
border:1px solid #eee;
top: 50%;
transform: translateY(-50%);
-webkit-filter: blur(0px);
z-index:99999999999999;
}

https://jsfiddle.net/qxv7k564/

Here you can see the full build of the sidebar, and you can also see that the second border I have (I originally had a border-top set to the description to achieve the same affect, but it would blur instead of disappearing for the same reason above, so I changed to this) also disappears. Removing the other elements seems to do nothing to change this issue.

Solution

  • You are forcing Chrome to do subpixel calculus, and this usually has strange behaviours.

    If you change the height of the input to 30px, then a 90% zoom works ok (because this is 27px), but a zoom of 75% not (because this is 22.50 px).

    You can also avoid this by giving the border a width of 3px. In this case, you will see that the borders width is different in different places .

    Anyway, the very best solution is to give more space around the inputs so that the border can be drawn cleanly even if it is in a subpixel position.

    Ref: Extracted from another question on stack.