Несовместимые поля между Chromium и Firefox - PullRequest
Новая
       27

Несовместимые поля между Chromium и Firefox

0 голосов
/ 31 января 2019

Я пытаюсь создать всплывающую подсказку для кнопки, которая может иметь переменное смещение.Я думал, что нашел хорошее решение, но что-то странное происходит при тестировании в другом браузере.Код ниже ( и в этой скрипке ) будет отображаться по-разному между Chromium 72.0.3626.81 и Firefox 66.0b3 (оба в Arch Linux).В Chromium он отображается, как и ожидалось, но в Firefox всплывающая подсказка не корректно смещена.В Firefox поле фактической всплывающей подсказки вдвое меньше, чем должно быть.

Почему это происходит, и как можно поддерживать согласованное поведение между браузерами? 

:root {
    font-size: 62.5%;
    font-family: 'sans-serif';
    --tooltip-offset: 50px;
}

.container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.link {
    border-radius: 4px;
    height: 4rem;
    font-size: 1.6rem;
    border: 1px solid hsl(215, 36%, 78%);
    padding: 0 1.5rem;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.tooltip {
    font-size: 1.4rem;
    z-index: 2;
    width: 225px;
    position: absolute;
    text-align: center;
    padding: 0.7rem 3rem;
    border-radius: 4px;
    pointer-events: none;
    top: 100%;
    margin-top: 12px;
    border: 1px solid black;
    margin-left: calc(0px - var(--tooltip-offset));
}

.tooltip:before {
    z-index: 1;
    content: ' ';
    position: absolute;
    bottom: 100%;
    border-color: transparent transparent black transparent;
    margin-left: var(--tooltip-offset);
    left: calc(50% - 12px);
    border-width: 12px;
    border-style: solid;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"/>
<div class="container">
    <a class="link" href="example.com">
        Go to example.com
    </a>
    <span class="tooltip">
        Click here to go to example.com
    </span>
</div>

1 Ответ

0 голосов
/ 31 января 2019

Я не уверен, что Firefox и Chrome по-разному обрабатывают отрицательные поля, поэтому более надежным способом может быть использование преобразования: 

:root {
    font-size: 62.5%;
    font-family: 'sans-serif';
    --tooltip-offset: 50px;
}

.container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.link {
    border-radius: 4px;
    height: 4rem;
    font-size: 1.6rem;
    border: 1px solid hsl(215, 36%, 78%);
    padding: 0 1.5rem;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.tooltip {
    font-size: 1.4rem;
    z-index: 2;
    width: 225px;
    position: absolute;
    text-align: center;
    padding: 0.7rem 3rem;
    border-radius: 4px;
    pointer-events: none;
    top: 100%;
    margin-top: 12px;
    border: 1px solid black;
    transform: translateX(calc(0px - var(--tooltip-offset)));
}

.tooltip:before {
    z-index: 1;
    content: ' ';
    position: absolute;
    bottom: 100%;
    border-color: transparent transparent black transparent;
    margin-left: var(--tooltip-offset);
    left: calc(50% - 12px);
    border-width: 12px;
    border-style: solid;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"/>
<div class="container">
    <a class="link" href="example.com">
        Go to example.com
    </a>
    <span class="tooltip">
        Click here to go to example.com
    </span>
</div>

Похоже, что он работает правильно в обоих браузерах на моем конце!

...