Отступ текста - не отображать текст в Safari

Question

Я новичок в кодировании, и у меня есть некоторые проблемы с text-indent и safari.

На chrome и firefox все ок. Проблема в том, что я сделал две кнопки, одна над другой, с текстом рядом друг с другом, и текст не отображается в сафари.

Потерял уже 3 часа, я не знаю, что делать.

Вот это jsfiddle

.btn-group .button {
    background:url(https://image.ibb.co/iSdLzS/red.jpg) no-repeat;
    cursor: pointer;
    width: 100px;
    height: 100px;
    object-fit: cover;
    background-size: 100%; 
    display: block;
	  text-indent: 105px;
    font-size: 25px;
    font-kerning: normal;
    font-family: Lato,sans-serif;
    text-decoration: none;
    color: #007896;
    border: none;
    opacity: 1;
    transition: 0.3s;
}
.btn-group .button:not(:last-child) {
    border-right: none; /* Prevent double borders */
}
.btn-group .button:hover {opacity: 0.8
}

.btn-group .button2 {
    background:url(https://image.ibb.co/fskHeS/blue.png) no-repeat;
    cursor: pointer;
    width: 100px;
    height: 100px;
    object-fit: cover;
    background-size: 100%; 
    display: block;
	  text-indent: 105px;
    font-size: 25px;
    font-kerning: normal;
    font-family: Lato,sans-serif;
    text-decoration: none;
    color: #007896;
    border: none;
    opacity: 1;
    transition: 0.3s;
}
.btn-group .button2:not(:last-child) {
    border-right: none; /* Prevent double borders */
}
.btn-group .button2:hover { opacity: 0.8
}

<div class="btn-group">
  <button class="button">Reeeed</button><br>
  <button class="button2">Blue</button>
</div>

Answer 1

Здесь вы найдете похожий вопрос, но я попробовал ответ, но ничего не получилось

Тогда я проделал этот трюк с position и попробовал себя, надеюсь, это поможет

Вы должны создать для текста тег p и расположить их absolute, но с родительской кнопкой relative, а затем отцентрировать их по вертикали.

.btn-group .button {
    background:url(https://image.ibb.co/iSdLzS/red.jpg) no-repeat;
    cursor: pointer;
    position:relative;
    width: 100px;
    height: 100px;
    object-fit: cover;
    background-size: 100%; 
    display: block;
	  text-indent: 105px;
    font-size: 25px;
    font-kerning: normal;
    font-family: Lato,sans-serif;
    text-decoration: none;
    color: #007896;
    border: none;
    opacity: 1;
    transition: 0.3s;
}
.btn-group .button:not(:last-child) {
    border-right: none; /* Prevent double borders */
}
.btn-group .button:hover {opacity: 0.8
}

.btn-group .button2 {
    background:url(https://image.ibb.co/fskHeS/blue.png) no-repeat;
    cursor: pointer;
    width: 100px;
    height: 100px;
    object-fit: cover;
    background-size: 100%; 
    display: block;
	  text-indent: 105px;
    font-size: 25px;
    font-kerning: normal;
    font-family: Lato,sans-serif;
    text-decoration: none;
    color: #007896;
    border: none;
    opacity: 1;
    position:relative;
    transition: 0.3s;
}
.btn-group .button2:not(:last-child) {
    border-right: none; /* Prevent double borders */
}
.btn-group .button2:hover { opacity: 0.8
}

button p {
position: absolute;
top: 0;
bottom:0;

}

<div class="btn-group">
  <button class="button"><p>Reeeed</p></button><br>
  <button class="button2"><p>Blue</p></button>
</div>