Inconsistent margins between Chromium and Firefox - html

Question

I'm trying to make a tooltip for a button that can have a variable offset. I thought I had found a good solution, but something strange happens when tested in another browser. The code below (and in this fiddle) will render differently between Chromium 72.0.3626.81 and Firefox 66.0b3 (both on Arch Linux). On Chromium it displays as expected, but on Firefox the tooltip is not offset correctly. On Firefox, the margin of the actual tooltip is off by half of what it should be.
Why does this happen, and how can I keep the intended behaviour consistent between browsers?
: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>

Answer 1

I'm not sure if Firefox and Chrome handle negative margins differently, so a more reliable way might be to use transform:
: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>
That looks like it works correctly in both browsers on my end!