title: Safari doesn't render css gradient text
body: <p>I'm trying to make gradient text in webkit browsers using this CSS code:</p>
  <pre class="lang-css prettyprint-override"><code>.text {
      background: -webkit-linear-gradient(blue, green);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }
  </code></pre>
  <p>it works perfectly in Chrome, but in Safari (both 8 and 9) it doesn't render gradient text unless you select it via mouse click+drag over it.</p>
  <p>HTML is as follows:</p>
  <pre><code>&lt;p class = &quot;text&quot;&gt;Hello world.&lt;/p&gt;
  </code></pre>
  <p>Spent 2 evening on that. Found a lot of recommendations to use this method with couple issues similar to mine and no solutions at all. Would appreciate a lot if someone would help.</p>
  <p>IMPORTANT UPDATE:</p>
  <p>I've found out, that this code works great when applied to single <code>&lt;p&gt;</code> element, but fails to render in Safari (not in chrome) when applied to div wrapper to single or multiple <code>&lt;p&gt;</code> elements like this:</p>
  <pre><code>&lt;div class = &quot;text&quot;&gt;    
     &lt;p&gt;First line.&lt;/p&gt;
     &lt;p&gt;Second, way longeeeeeeer line. &lt;/p&gt;
     &lt;p&gt;Third line, just to see gradient span over multiple lines. &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Any thoughts why this could be the case or how to overcome this?</p>