Safari 的扭曲 css 顶部

Question

目前我正在尝试实现一些不使用 javascript 的通用工具提示（仅基于 css）。为此，我使用带有包装器 css 类的包装器 div 和具有某些显示属性的工具提示类以及一些 margin-top 和 margin-left 值，以便为悬停的元素留出空间。

它适用于 Chrome 和 Firefox，但在 Safari 中，最高值似乎乘以工具提示下方的窗口滚动。

有人知道 Safari 所需的解决方法吗？

css 类：

.generic-tooltiptext {
    visibility: hidden;
    background-color: #333;
    color: #fff;
    border: solid thin #000;
    text-align: center;
    border-radius: 4px;
    padding: 0px 5px;
    margin-top: 20px;
    margin-left: 20px;
    position: absolute;
    z-index: 1;
  }

  .generic-tooltip:hover .generic-tooltiptext {
    visibility: visible;
    transition-delay:0.75s;
}

这与一个反应组件交互：

interface GenericTooltip{
    style?: CSSProperties;
    text: string
}

export const GenericTooltip : React.FC<GenericTooltip> = ({style, text, children}) => {

    return <div 
        style={style}               
        className="generic-tooltip">
        <div className="generic-tooltiptext">
            {text}
        </div>
        {children}
    </div>
}

Answer 1

刚刚发现问题与边距无关：如果我将边距设置为 0，问题就会继续出现。

将代码更改为：

.generic-tooltiptext {
    display: none;

/*--------------------*/

.generic-tooltip:hover .generic-tooltiptext {
    display: block;

另一方面，如果我使用 display none / block 作为条件显示的机制，这个“上边距”问题将得到解决......尽管效果的时间流逝已被取消。

所以在 safari 中可见性字段有一些奇怪的行为。