Gradient over tekst gaat niet goed in Safari

[posttoast]

Ik heb hier een ontwerp met een gradient over tekst, een soort "gloei" effect. Zo moet het eruit zien:



En, met wat eenvoudige CSS ziet het er ook precies zo uit:

SCSS:

body {
  background: #ccc;
  font-family: sans-serif;
}

h1 {
  position: relative;
  font-size: 40px;
  text-transform: uppercase;
  display: inline-block;
  
  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to right, transparent, #ccc);
  }
  
}

Met hier een mooie link naar een codepen.

Allemaal leuk en aardig, alleen: Safari gooit roet in het eten. Daar komt er in het transparante deel een raar soort waas overheen. Dat ziet er dan zo uit:



Mijn vraag lijkt me duidelijk: hoe kan dit? Is dit een bug in Safari en kan dit gewoon niet? Of kent iemand een manier om dit wel voor elkaar te krijgen?

[DJMaze]

Ik moest er dit van maken anders had ik fouten in de render in Firefox 44.0.2
http://codepen.io/anon/pen/ZWLwyW
(zie de right -1px)

P.S. ipv "transparent" misschien

code:

linear-gradient(to right, rgba(204,204,204,0), rgba(204,204,204,1));

[ Voor 42% gewijzigd door DJMaze op 18-03-2016 15:32 ]

[posttoast]

De variant met RGBA waardes had ik ook al geprobeerd. Het lost helaas niets op. Wel bedankt voor het meedenken

[DJMaze]

posttoast schreef op vrijdag 18 maart 2016 @ 22:08:
De variant met RGBA waardes had ik ook al geprobeerd.

En welke RGBA had je gebruikt dan?
Want "transparent" is rgba(0,0,0,0) en dan is de grijze gloed die jij in het midden ziet correct.
Dat hoort zo, alle andere browsers zijn fout.

[LamSchaap]

Probeer het is zo:

Cascading Stylesheet:

h1{
background: -webkit-linear-gradient(right, transparent, #ccc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

[posttoast]

DJMaze, met schaamrood op de kaken moet ik nu inzien dat ik jouw eerste reactie niet goed gelezen/begrepen had. Jouw oplossing werkt gewoon. En ik snap nu ook wat het probleem was. Eind goed al goed dus

[ Voor 82% gewijzigd door posttoast op 21-03-2016 09:50 ]