почему мой flexbox не отображается в сафари?

Question

У меня есть текст в немного необычном расположении flexbox / span (причина которого объясняется здесь) , и он не отображается в Safari. Это выглядит нормально во всех других браузерах, которые я пробовал

Кажется, это распространенный вопрос, но большинство предложений включают различные варианты отображения: параметры гибкости , которые я применил, но они все еще не работают.

У кого-нибудь есть идеи?

HTML

<h1>
   <span id="firstspan">this</span>
   <span id="secondspan">phrase</span>
</h1>

CSS

h1 {
   font-family: 'Fugaz One', serif;
   font-weight:300;
   position: absolute;
   transform: rotate(-7.7deg);
   color: transparent;
   -webkit-background-clip: text;
   background-clip: text;
   background-image: -webkit-linear-gradient(8deg, #d58da3, #fa8567, #fa9551); 
   background-image:    -moz-linear-gradient(8deg, #d58da3, #fa8567, #fa9551); 
   background-image:     -ms-linear-gradient(8deg, #d58da3, #fa8567, #fa9551); 
   background-image:      -o-linear-gradient(8deg, #d58da3, #fa8567, #fa9551);  
   background-image:         linear-gradient(8deg, #d58da3, #fa8567, #fa9551); 
   background-position-y: 1vw;
   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
   display: -ms-flexbox;      /* TWEENER - IE 10 */
   display: -webkit-flex;     /* NEW - Chrome */
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   font-size: 17.3vw;
   left: -2vw;
   top: calc(270px - 20vw); /*a smaller vw and it will move up as you shrink, a smaller px and it will shift up*/
}

#secondspan {
   font-size: 13.7vw;
   margin-left: -1vw;
   margin-top: -10.5vw;
}

Answer 1

Вот решение:

h1 {
   font-family: 'Fugaz One', serif;
   font-weight:300;
   position: absolute;
   transform: rotate(-7.7deg);
   color: transparent;
   -webkit-background-clip: text;
   background-clip: text;
   background-image: -webkit-linear-gradient(8deg, #d58da3, #fa8567, #fa9551); 
   background-image:    -moz-linear-gradient(8deg, #d58da3, #fa8567, #fa9551); 
   background-image:     -ms-linear-gradient(8deg, #d58da3, #fa8567, #fa9551); 
   background-image:      -o-linear-gradient(8deg, #d58da3, #fa8567, #fa9551);  
   background-image:         linear-gradient(8deg, #d58da3, #fa8567, #fa9551); 
   background-position-y: 1vw;
   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
   display: -ms-flexbox;      /* TWEENER - IE 10 */
   display: -webkit-flex;     /* NEW - Chrome */
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   
   font-size: 17.3vw;
   left: -2vw;
   top: calc(270px - 20vw); /*a smaller vw and it will move up as you shrink, a smaller px and it will shift up*/
}

#secondspan {
   font-size: 13.7vw;
   margin-left: -1vw;
   margin-top: -10.5vw;
}

<h1>
   <span id="firstspan">this</span>
   <span id="secondspan">phrase</span>
</h1>