Flexbox layout not compatible with grid-column-gap in Safari - css

Question

In Elementor I am using the Social Icons component (Multi-column layout) nesting it inside a Section's Column (Flexbox layout).
However, Safari is not able to determine its position accurately because the CSS property --grid-column-gap is not implemented there properly when the element is nested inside Flexbox layout.
https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap#browser_compatibility
Safari does not recognize the gaps when centering the grid, so the layout is off by 4x14px.
The below code is from Elementor (without modification), how can I solve this issue with Safari?
HTML:
<div class="elementor-widget-wrap ui-sortable">
<div data-id="fe6279a" data-element_type="widget"
class="elementor-element elementor-element-edit-mode elementor-element-fe6279a elementor-element--toggle-edit-tools elementor-widget elementor-widget-social-icons elementor-shape-circle elementor-grid-0 elementor-element-editable"
data-model-cid="c1624" id="" data-widget_type="social-icons.default">
<div class="elementor-widget-container">
<div class="elementor-social-icons-wrapper elementor-grid">
<div class="elementor-grid-item">
<a class="elementor-icon elementor-social-icon elementor-social-icon-linkedin-in elementor-animation-push elementor-repeater-item-cd42a4c"
href="https://www.linkedin.com" target="_blank">
<span class="elementor-screen-only">Linkedin-in</span>
<i class="fab fa-linkedin-in"></i> </a>
</div>
<div class="elementor-grid-item">
<a class="elementor-icon elementor-social-icon elementor-social-icon-xing elementor-animation-push elementor-repeater-item-38c83d4"
href="https://www.xing.com" target="_blank">
<span class="elementor-screen-only">Xing</span>
<i class="fab fa-xing"></i> </a>
</div>
<div class="elementor-grid-item">
<a class="elementor-icon elementor-social-icon elementor-social-icon-twitter elementor-animation-push elementor-repeater-item-002da7e"
href="https://www.twitter.com" target="_blank">
<span class="elementor-screen-only">Twitter</span>
<i class="fab fa-twitter"></i> </a>
</div>
...
</div>
</div>
</div>
</div>
CSS:
/* Parent element */
.elementor-2503 .elementor-element.elementor-element-08404ae.elementor-column.elementor-element[data-element_type="column"] > .elementor-column-wrap.elementor-element-populated > .elementor-widget-wrap {
align-content: center;
align-items: center;
}
.elementor-2503 .elementor-element.elementor-element-08404ae.elementor-column > .elementor-column-wrap > .elementor-widget-wrap {
justify-content: center;
}
.elementor:not(.elementor-bc-flex-widget) .elementor-widget-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex; /* Parent element uses Flex layout */
}
.elementor-widget-wrap {
position: relative;
width: 100%;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-line-pack: start;
align-content: flex-start;
}
/* Child element*/
.elementor-2503 .elementor-element.elementor-element-fe6279a {
--grid-template-columns: repeat(0, auto);
--icon-size: 18px;
--grid-column-gap: 14px; /* Does not work in Safari */
}
.elementor-widget-wrap>.elementor-element {
width: 100%;
}
.elementor-widget {
position: relative;
}

Answer 1

My solution consists of disabling grid-column-gap in Elementor
and creating this custom site-wide code that uses border-right instead.
.elementor-social-icons-wrapper .elementor-grid-item {
border-right: 14px solid transparent;
}
.elementor-social-icons-wrapper .elementor-grid-item:last-child {
border-right: 0px solid transparent;
}