title: CSS gradient not working on iOS
body: <p>I have created a <a href="http://www.display-inline.fr/projects/css-gradient/#startType=hex&amp;startValue=FFAD26&amp;endType=hex&amp;endValue=FF7701&amp;step1Type=hex&amp;step1Value=FEA026&amp;step1Position=50&amp;step2Type=hex&amp;step2Value=FFFFFF&amp;step2Position=50&amp;step3Type=hex&amp;step3Value=FFFFFF&amp;step3Position=50&amp;step4Type=hex&amp;step4Value=FFFFFF&amp;step4Position=50&amp;step5Type=hex&amp;step5Value=FF8B00&amp;step5Position=50&amp;size=210&amp;extOpera=1&amp;extIE=1">gradient background</a> using a CSS generator. This works perfectly in all major browsers and on Android. However in iOS i get <a href="http://piclair.com/data/trwm6.jpg">this</a>.</p>
  
  <p>What do I need to add to this gradient in order to make it working on iOS?</p>
  
  <p><strong>Edit:</strong> Because this question isn't gaining enough attention, I'd like to ask a different question: What do I need for css tag to create a linear gradient for safari/ios, when, as in this case, -webkit-linear-gradient is not working? Are there any other css gradient tags, specifically for safari?</p>
  
  <p>Here's the code for my background:</p>
  
  <pre><code>.gradient {
  /* Legacy browsers */
  background: #FF7701 url("gradient-bg.png") repeat-x top;
  -o-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  /* Internet Explorer */
  *background: #FF7701;
  background: #FF7701\0/;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient-bg.png", sizingMethod="scale");
  }
  @media all and (min-width: 0px) {
      .gradient {
          /* Opera */
          background: #FF7701 url("gradient-bg.svg");
          /* Recent browsers */
          background-image: -webkit-gradient(
              linear,
              left top, left bottom,
              from(#FFAD26),
              to(#FF7701),
      color-stop(0.5, #FEA026),
      color-stop(0.5, #FFFFFF),
      color-stop(0.5, #FFFFFF),
      color-stop(0.5, #FFFFFF),
      color-stop(0.5, #FF8B00)
          );
          background-image: -webkit-linear-gradient(
              top,
              #FFAD26,
              #FEA026 50%,
      #FFFFFF 50%,
      #FFFFFF 50%,
      #FFFFFF 50%,
      #FF8B00 50%,
      #FF7701
          );
          background-image: -moz-linear-gradient(
              top,
              #FFAD26,
              #FEA026 50%,
      #FFFFFF 50%,
      #FFFFFF 50%,
      #FFFFFF 50%,
      #FF8B00 50%,
      #FF7701
          );
          background-image: -o-linear-gradient(
              top,
              #FFAD26,
              #FEA026 50%,
      #FFFFFF 50%,
      #FFFFFF 50%,
      #FFFFFF 50%,
      #FF8B00 50%,
      #FF7701
          );
          background-image: linear-gradient(
              top,
              #FFAD26,
              #FEA026 50%,
      #FFFFFF 50%,
      #FFFFFF 50%,
      #FFFFFF 50%,
      #FF8B00 50%,
      #FF7701
          );
      }
  }
  </code></pre>