How would I prevent the white from going past the line when zoomed?
This may not be possible to do.
Code:
There is no white in your fiddle. The colors in your fiddle to not bleed.
Can’t fix code we can’t see.
EDIT: Oh okay, I found it.
To me your colors dont bleed, but based on your picture, your problem is in either the size of your pink thing or the position of your line.
Why draw the line at all? Why not just border the pink bit?
1 Like
When zoom is increased the white, or green overlaps, goes past the line.
Yes you could put the border on the coloured block as @m_hutley mentioned above and then there won’t be a gap in between it when zoomed. 
Or you could make the coloured block 2px longer and start it under the line and then when its zoomed and rounded it won’t show white either. You would also need to raise the z-index on the lines to keep them on top.
I shouldn’t be too concerned about how things look when zoomed because at some stage pixels will need to be rounded and quite often will not match exactly. Of course the layout should stay together but 1px gaps are often to be expected.
In Chrome you don’t get a gap in the middle and I have Firefox set to zoom text only so I don’t see the gap in Firefox unless I change my zoom settings.
I mean, i’ve got my browser cranked up to 300% zoom on it and it looks fine to me:
EDIT: Ah, is it a browser-specific thing, Paul? Would explain why i’m not seeing it.
1 Like
Yes it seems to be a Firefox problem and Chrome and Edge seem ok although at exorbitant zooms Chrome and edge show white gaps at top and bottom and not at the sides.
Its not something I would generally think needed fixing as its down to the browser to zoom properly However it can be entertaining to try and work out solutions as long as they aren’t convoluted.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.