safari - position absolute with left / right auto

What I intend to achieve is the result on the first picture, whereas I got the logo's next to each other aligned with the last column and the last row. Specifically on safari, I'm having this issue as seen in the second picture.

I can think of several ways to "fix it", such as grids, but I want to approach it the way it currently is.

Suggestions accepted

in other browsers:

in safari:

Code:

.all__menu {
	padding-top: 232px;
	margin: 0 66px;
}

.menu__content {
	position: relative;
	-webkit-column-count: 3;
	column-count: 3;
}

.option-menu  {
  color: #fff;
	margin-bottom: 4vw;
}


.menu__social {
	position: absolute;
	bottom: 8px;
  padding: 0;
  margin: 0;
}

.social {
	margin-right: 30px;
}

.all-page {
	position: fixed;
	top: 0;
	background: #000;
	width: 100vw;
	height: 100vh;
}

.li-inline {
	display: inline-block;
  color: #fff;
}

<div class="all-page">
    <div class="all__menu">
        <div class="menu__content">
            <div class="menu__options">
              <div class="option-menu current">link1</div>
              <div class="option-menu ">link2</div>
              <div class="option-menu ">link3</div>
              <div class="option-menu ">link4</div>
              <div class="option-menu ">link5</div>
              <div class="option-menu ">link6</div>
              <div class="option-menu ">link7</div>
            </div>
            <ul class="menu__social">
                <li class="social li-inline">logo-1</li>
                <li class="social li-inline">logo-2</li>
            </ul>
        </div>

    </div>
</div>