I created simple example:
- parent div with black border
- inner div with black background
<html>
<body>
<div style="scale: 0.75">
<div style="width: 400px; height: 495px; border: 7px solid black; overflow: hidden">
<div style="background: black; color: white; padding: 10px">test</div>
other test
</div>
</div>
</body>
</html>
As parent div has no padding - there should be no gaps between border and inner div. And it works in normal case. BUT when I'm adding scaling - it immediately adds white lines around the content. See example here: https://jsfiddle.net/tk7vsbpf/
I suppose this may be related to antialiasing in browser, but I still need some solution as unfortunately I have to scale my component. Maybe someone has ideas?
I tried to add background for parent div and it works - it removes the lines, but issue is - I need BG of other color there. I also tried to use box-shadow, but it doesn't fix the issue fully. It removes lines in some places, but not everywhere.
Why did the box shadow not work? If you do
box-shadow: 0px 0px 0px 1px rgba(0,0,0,1)it works fine and removes the white line. Look: