CSS 在不同的缩放级别上显示不同的渲染行为

Question

我使用 HTML 和 CSS 创建了这个 Tooltip 元素。但过了一会儿，我意识到我的工具提示的指针被切断了。起初我以为这是overflow 的问题，但事实并非如此。然后我尝试更改我的 chrome 的缩放级别，我得到了这个

缩放级别

如您所见，工具提示 （以红色突出显示） 的指针正在被剪切。

缩放级别 => 250%

现在，您可以看到相同的工具提示在不同的缩放级别上工作或渲染得很好。

谁能告诉我这一切背后的实际问题是什么，或者这是浏览器问题？？

工具提示代码

<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;
        }
    }
}

更新

虽然我没有找到任何解决方案，但我所做的却是我将工具提示的指针从 HTML 更改为 SVG 这样做之后，工具提示箭头或指针不会在不同的缩放级别或任何缩放级别上被剪切。如果有人想要代码DM我。

Answer 1

您为什么不尝试以不同的方式创建向下箭头？像这样：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;
}