Chrome / Firefox inconsistent when parent is positioned with absolute - css

Question

I have a map with rounded icons on it.
I'm using empty canvas elements to preserve 1:1 aspect ratio on rounded containers
When viewing in Chrome 67 everything is fine, but with Firefox 60 it does not work, aspect ratio is not preserved and icons have a content width of zero (only their padding make them visible)
It happens if parent (.zone) has position:absolute, however it work when .zone has position:relative.
I really need position:absolute, does somebody know why firefox does not expand width of .item to adjust to the canvas element ?
* {
margin: 0;
box-sizing: 0;
}
.zone {
position: absolute;
left: 5%;
right: 5%;
top: 5%;
bottom: 5%;
background: grey;
}
.item {
position: absolute;
transform: translate(-50%, -50%);
height: calc(100% / 11);
border-radius: 50%;
z-index: 3;
overflow: hidden;
cursor: help;
border: 1.5px solid #0acaff;
color: #0acaff;
}
.item canvas {
height: 100%;
}
.square_content {
background: red;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
padding: 5px;
}
<div class="zone">
<!-- inline style is computed -->
<div class="item" style="left: 22.727%;top: 77.273%;">
<canvas width="1" height="1"></canvas>
<div class="square_content">
</div>
</div>
</div>
Note: on the snippet you should see mostly a gray zone with a perfectly rounded icon (blue border and red background)

Answer 1

The issue is with height: calc(100% / 11); it's value is not picking up in Firefox, if you change the % to vw your code will work fine.
A sample code for you:
* {
margin: 0;
box-sizing: 0;
}
.zone {
position: absolute;
left: 5%;
right: 5%;
top: 5%;
bottom: 5%;
background: grey;
}
.item {
position: absolute;
transform: translate(-50%, -50%);
height: 4vw;
/* or height: calc(40vw/11); */
border-radius: 50%;
z-index: 3;
overflow: hidden;
cursor: help;
border: 1.5px solid #0acaff;
color: #0acaff;
}
.item canvas {
height: 100%;
}
.square_content {
background: red;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
padding: 5px;
}
<div class="zone">
<!-- inline style is computed -->
<div class="item" style="left: 22.727%;top: 77.273%;">
<canvas width="1" height="1"></canvas>
<div class="square_content">
</div>
</div>
</div>
The above sample work will all browsers, Hope this was helpful for you.