Искаженный css Верх для Safari

Question

В настоящее время я пытаюсь реализовать некоторые общие c всплывающие подсказки без использования javascript (на основе только css). Для этого я использую div-оболочку с классом-оболочкой css и класс всплывающей подсказки, который имеет определенные атрибуты отображения вместе с некоторыми значениями 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 в качестве механизма для условного отображения, эта проблема "верхнего поля" должна быть решена ... хотя временной промежуток для эффекта убирается.

Итак, есть некоторые любопытные поведение поля видимости в сафари.