CSS showing different render behavior on different zoom level - html

Question

I created this Tooltip element using HTML and CSS. But after a while I realized that the pointer of my tooltip is getting cut. At first I thought it was some overflow issue but it wasn't. Then I tried to change the zoom level of my chrome and I got this
ZOOM LEVEL <= 250%
As you can see the pointer of the tooltip (highlighted in red) is getting cut.
ZOOM LEVEL => 250%
Now, as you can see the same tooltip on different zoom level worked or rendered just fine.
Anyone can tell me what is the actual problem behind all this or this is a browser issue??
CODE FOR TOOLTIP
<div class="tooltip">
<div class="tooltip-pointer" data-pointer-direction="bottom"></div>
<div class="tooltip-content">Hello, World!</div>
</div>
.tooltip {
position: absolute;
color: white;
max-width: 196px;
font-weight: 600;
user-select: none;
border-radius: 4px;
font-size: 0.875rem;
pointer-events: none;
word-wrap: break-word;
transform-origin: 50% 0;
letter-spacing: 0.03125rem;
background-color: #18191c;
will-change: opacity, transform;
box-shadow: 0 5.18px 10.36px -3.89px rgba(0, 0, 0, 0.25);
.tooltip-pointer {
width: 0;
height: 0;
position: absolute;
pointer-events: none;
border: 5px solid transparent;
border-top-color: #18191c;
&[data-pointer-direction='bottom'] {
top: 100%;
left: 50%;
margin-left: -5px;
}
}
}
UPDATE
I haven't found any solution though instead what I did I change the pointer of tooltips from HTML to SVG after doing this the tooltip arrows or pointers is not getting cut on different zoom level or any zoom level. If anyone want the code DM me.

Answer 1

Why don't you try creating the down arrow in a different way? Something like this: https://jsfiddle.net/2jwhnrm3/
HTML
<div class="tooltip-pointer"></div>
<div class="tooltip">
<div class="tooltip-content">Hello, World!</div>
</div>
CSS
.tooltip {
position: absolute;
color: white;
max-width: 196px;
font-weight: 600;
user-select: none;
border-radius: 4px;
font-size: 0.875rem;
pointer-events: none;
word-wrap: break-word;
transform-origin: 50% 0;
letter-spacing: 0.03125rem;
background-color: #18191c;
will-change: opacity, transform;
box-shadow: 0 5.18px 10.36px -3.89px rgba(0, 0, 0, 0.25);
}
.tooltip-pointer {
border: solid red;
background: red;
border-width: 0 3px 3px 0;
display: inline-block;
position: absolute;
padding: 5px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
top: 17px;
left: 50px;
margin-left: -5px;
}