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

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;
}