Độ dốc CSS không hoạt động trên iOS

Question

Tôi đã tạo một gradient background bằng trình tạo CSS. Điều này hoạt động hoàn hảo trong tất cả các trình duyệt chính và trên Android. Tuy nhiên trong iOS tôi nhận được this.

Tôi cần thêm gì vào gradient này để làm cho nó hoạt động trên iOS?

Chỉnh sửa: Vì câu hỏi này không thu hút được sự chú ý, tôi muốn hỏi một câu hỏi khác: Tôi cần thẻ css để tạo gradient tuyến tính cho safari/ios khi nào case, -webkit-linear-gradient không hoạt động? Có thẻ gradient css khác, đặc biệt cho safari?

Dưới đây là các mã cho nền của tôi:

.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

làm cho này một tấm séc trong iOS nhưng nó nên làm việc:

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 */ 

tôi cũng khuyên bạn nên nhìn vào một tiền xử lý như SASS sẽ tạo ra rất nhiều thứ cho bạn.

Alternative 1

Là một thay thế, bạn có thể thử sử dụng một bóng hộp hình chữ nhật. Đó không phải là chính xác, và nó có những hạn chế của nó nhưng nó chỉ là một tùy chọn :)

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

Alternative 2

Nếu bạn biết chiều cao, hoặc sử dụng các bóng hộp phía trên hoặc chỉ sử dụng một hình ảnh nền. Bằng cách đó bạn sẽ nhận được hỗ trợ qua trình duyệt mà không có sự lộn xộn đó là một trăm thuộc tính CSS tiền tố như ở trên :)

Answer 2

Working DEMO đây http://jsfiddle.net/yeyene/akRHX/

Và ảnh chụp màn hình iPhone của mình ...

thêm lớp css của bạn vào phần tử.

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

trong Safari di động ít nhất, bạn không thể sử dụng từ khóa transparent, bạn phải sử dụng rgba(255,255,255,0) để thay thế. Bằng chứng: https://developer.apple.com/library/safari/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Gradients/Gradient.html

Tìm kiếm trong suốt, bạn sẽ thấy ngay cả trong tài liệu chính thức của chúng, chúng sử dụng rgba cho màu trong suốt.