why doesn't my flexbox display in safari?

Question

I have some text in a slightly unusual flexbox/span arrangement (the reason for which is explained here) and it's not displaying in Safari. It appears fine in all other browsers I've tried.

It seems this is common question, but most of the suggestions are to include different display:flex options, which I have applied but it still doesn't work.

Does anybody have any ideas?

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

There is a bug in the official safari bug tracker. Unfortunately it looks like nobody has looked into it for the last two years: https://bugs.webkit.org/show_bug.cgi?id=169125 See also: https://stackoverflow.com/questions/31289537/webkit-text-fill-color-transparent-not-working-in-safari-7-1-7 — jantimon, Aug 28 '19 at 15:49

score 0 · Answer 1 · answered Jan 08 '19 at 06:18

Here is solution:

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>

hmm well the bad news is that I'm still not able to see it on Safari, but the good news is that when I select the area where it should be I can select the text. Which must mean that it's "color: transparent;" is working but for some reason the gradient isn't. Do you have any idea why? — Josh McGee, Jan 08 '19 at 09:56

why doesn't my flexbox display in safari?

1 Answers1