CSS градиент не работает на iOS

Question

Я создал gradient background с использованием генератора CSS. Это прекрасно работает во всех основных браузерах и на Android. Однако в iOS я получаю this.

Что нужно добавить к этому градиенту, чтобы заставить его работать на iOS?

Edit: Поскольку этот вопрос не получает достаточного внимания, я хотел бы задать другой вопрос: Что мне нужно для CSS тега, чтобы создать линейный градиент для сафари/КСН, когда, как в этом case, -webkit-linear-gradient не работает? Существуют ли другие теги градиента css, особенно для сафари?

Вот код для моего фона:

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

Answer 1

ли дать этому чек в прошивке, но это должно работать:

background: #ffad26; /* Old browsers */ 
background: -moz-linear-gradient(top, #ffad26 0%, #fea026 50%, #ff8b00 51%, #ff7701 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffad26), color-stop(50%,#fea026), color-stop(51%,#ff8b00), color-stop(100%,#ff7701)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffad26', endColorstr='#ff7701',GradientType=0); /* IE6-9 */ 

Я также рекомендую посмотреть на препроцессор как SASS, который создаст для вас много всего этого.

Альтернатива 1

В качестве альтернативы, вы можете попробовать использовать тень врезки коробки. Это не точно, и она имеет свои ограничения, но это просто вариант :)

background-color:#FF8B00; 
-webkit-box-shadow: inset 0px 100px 0px 0px rgba(255, 255, 255, 0.5); 
box-shadow: inset 0px 100px 0px 0px rgba(255, 255, 255, 0.5); 

Альтернатива 2

Если вы знаете высоту, либо использовать тень окна выше или просто использовать фоновое изображение. Таким образом, вы получите поддержку кросса-браузер без беспорядка, который сто приставочных свойства CSS, как и выше :)

Answer 2

Рабочей DEMO здесь http://jsfiddle.net/yeyene/akRHX/

И его скриншот iPhone ...

Добавьте свой класс css к элементу.

HTML

<div data-role="page"> 

    <div data-role="header"> 
     <h1>Page Title</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 

     <div class="ui-grid-a"> 
      <div class="ui-block-a"><div class="ui-bar gradient" style="height:200px">Block A</div></div> 
      <div class="ui-block-b"><div class="ui-bar gradient" style="height:200px">Block B</div> 
     </div> 

</div><!-- /grid-a --> 

    </div><!-- /content --> 


</div><!-- /page --> 

CSS

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

Answer 3

В мобильном сафари по крайней мере, вы не можете использовать ключевое слово transparent, вы должны использовать rgba(255,255,255,0) вместо этого. Доказательство: https://developer.apple.com/library/safari/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Gradients/Gradient.html

Поиск прозрачных изображений, которые вы увидите даже в официальном документе, они используют rgba для прозрачного цвета.