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

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

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

Edit: поскольку этот вопрос не привлекает достаточного внимания, я хотел бы задать другой вопрос: Что мне нужно для CSS-тега для создания линейного градиента для safari / ios, когда, как в в этом случае-webkit-linear-gradient не работает? Есть ли другие теги градиента css, специально для safari?

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

.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/;
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
        );
    }
}
13
css ios mobile-safari safari

3 ответов

сделайте эту проверку в iOS, но она должна работать:

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 с префиксом, как указано выше :)

9

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

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

39

рабочая демо здесь http://jsfiddle.net/yeyene/akRHX/

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

enter image description here

добавьте класс 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/;
    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
            );
        }
    }
3