I have implemented a
linear-gradient(90deg, transparent 0 47px, #000 47px 48px);
background-size: 48px;
to create 1px vertical lines on the background. It is functioning correctly in all browsers, including Safari, except when the Safari browser is zoomed in.
Here is a demo link: https://jsfiddle.net/kasheftin/7s1af36g/2/
.container {
background: linear-gradient(90deg, transparent 0 47px, #000 47px 48px);
background-size: 48px;
width: 300px;
height: 100px;
border: 1px solid #000;
}
<div class="container">
</div>
This is how it appears in Safari version 16.3 with 110% zoom:
https://i.sstatic.net/iKrbc.png
Furthermore, the lines completely disappear when the browser is zoomed out.
https://i.sstatic.net/GTAQ6.gif
Is there any workaround or fix for this issue?