Jump to content
  • 0

Не работает linear-gradient в Safari


Universe
 Share

Question

Добрый день, пробую использовать на своём сайте линейный градиент. Работает во всех браузерах кроме Safari.

Вот код, который я использую

background: linear-gradient(to top, rgba(0, 0, 0, 0.14902), rgba(255, 255, 255, 0) 53%, rgba(41, 41, 41, 0.117647) 89%, rgba(0, 0, 0, 0.14902)),url("http://jiu.marsana-shop.com.ua/templates/yoo_infinite/css/../images/blue_bg.png");

Добавление префикса -webkit- ничего не дало

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0

Я уже несколько раз говорил на форуме, не охота повторяться. Использование градиентов можно существенно упростить, применяя css-градиенты в связке с svg. Метод успешно опробован и очень хорошо себя показывает.

Так, что я просто оставлю ссылку на пост на форуме

Link to comment
Share on other sites

  • 0

Главное отличие префикснутых градиентов от стандартных — там указывается не конечная, а начальная точка. Вместо "to top" пишется "bottom" (без "to"!) и т.д.

применяя css-градиенты в связке с svg

А смысл в связке? Чем SVG-градиента, если он уже есть, недостаточно? Из-за того бага в Опере/Престо при скролле — так сколько ее осталось, той Оперы?

Link to comment
Share on other sites

  • 0

Смысл в отказе от префиксов. SVG выступает как фолбек. Тем более, что SVG в любом случае придется использовать для IE9! Я считаю вполне логичным обеспечить таким образом работу градиента в тех браузерах которых еще нет безпрефиксной поддержки, таких как, например в safari 6-. Уменьшив и упростив тем самым css.

На данный момент в этом плане отстают только IE9, Safari 6-, и мобильные браузеры.

Мы же уже это обсуждали :)

Link to comment
Share on other sites

  • 0

Обсуждали, да (к сожалению, не могу найти ссылку на то обсуждение), но я до сих пор не избавился от ощущения, что использование целого SVG в качестве фолбека для одних лишь градиентов подозрительно смахивает на использование джипа в качестве фолбека для скутера :)

Имхо, если надо поставить градиент быстро и только для нового, а для хлама типа IE9 приемлема деградация, достаточно стандартного CSS-синтаксиса. А если в любом случае используется SVG, я не вижу смысла дублировать его еще и CSSом, усложняя и без того неочевидный (по крайней мере, для новичков) код. Разве что Опера на Престо с ейным хитровывернутым скроллингом, но она стремительно уходит в историю...

Link to comment
Share on other sites

  • 0

если не нужен IE9, то само собой, но заменять svg-шкой градиенты для всех не правильно, потому что svg это лишний запрос, а css нет (понятное дело что можно и в base64 закодировать, но это не лучший выход). А так получится все кто при памяти будут пользовать css, а если уж ну совсем все плохо то так уж и быть сделает лишний запрос и подключит svg, вот и все. Зато на выходе такой вариант получается гораздо проще чем 100500 префиксов. разобраться в градиентах на svg это ровно 5 минут времени

Link to comment
Share on other sites

  • 0
не эта ли дискуссия имеется в виду?

эта вообще одна из исторических и самых первых дискуссий, об этом направлении, насколько я помню. :) я в то время как раз только начал разбираться с разными вариантами применения svg. прошел год с лишним и я уже весьма негативно смотрю в сторону base64 в css, к примеру. Префиксы стали неактуальны по причине взросления основных браузеров, и были исключены за ненадобностью

Link to comment
Share on other sites

  • 0
не эта ли дискуссия имеется в виду?

Она самая, спасибо!

понятное дело что можно и в base64 закодировать, но это не лучший выход

AFAIK, SVG, в отличие от растровой графики, можно внедрять в CSS и без base-64-кодирования (правда, с url-эскейпингом), и цвета при необходимости редактировать там же. Честно говоря, про вариант с отдельным запросом я вообще не думал (там же весь файл весит чуть ли не меньше, чем HTTP-заголовки, а если соглашаться на отдельный запрос, то так можно докатиться и до растровых картинок и поддержки IE8 заодно... ой, что-то меня не в ту сторону понесло :)). Я вообще-то думал, что речь об убирании лишнего из результата того же colorzill'овского генератора и ему подобных...

разобраться в градиентах на svg это ровно 5 минут времени

Видимо, кому как :). Мне вот стыдно признаться, но я не смог разобраться за два года — до сих пор подглядываю в доки и те же генераторы... :blush:

чем 100500 префиксов
Уже не аргумент, потому что
Префиксы стали неактуальны
Под вопросом лишь единственный оставшийся префикс, и то от силы на ближайших полгода.
Link to comment
Share on other sites

  • 0
то так можно докатиться и до растровых картинок и поддержки IE8 заодно...

не докатимся, ибо растровая графика не позволит делать адекватные градиенты которые будут нормально растягиваться без артефактов.

Я вообще-то думал, что речь об убирании лишнего из результата того же colorzill'овского генератора и ему подобных...

Я именно это и преследую, меньше писать и быть ближе к безпрефиксным записям

Видимо, кому как . Мне вот стыдно признаться, но я не смог разобраться за два года — до сих пор подглядываю в доки и те же генераторы...

Что вот тут вот сложного?


<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<linearGradient id="g" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#848484" stop-opacity="1"/>
<stop offset="100%" stop-color="#434343" stop-opacity="1"/>
</linearGradient>
<rect x="0" y="0" width="1" height="1" fill="url(#g)" />
</svg>

Те же самые color-stop'ы как и в css-градиентах. Единственная сложность это указание угла поворота градиента, кстати, надо бы посмотреть, возможно есть проще способ

Уже не аргумент, потому что

Само собой, я в том смысле, что получаем поддержку градиентов просто в нагрузку бесплатно для тех кому префикс еще нужен

Под вопросом лишь единственный оставшийся префикс, и то от силы на ближайших полгода.

да -webkit- но тут пока что safari 6 его хочет, 7-ая уже без префикса, ну и мобильные андроиды. Неизвестно как обстоят дела в Android 4.3 и 4.4

Если же в ближайшее время окажется, что только IE9 останется нуждающимся в svg (а так и произойдет), то я пожалуй буду склонен отказаться от svg в этом качестве в угоду деградации. Такое мое видение в перспективе.

Сейчас как раз подумал. Вся эта мода на плоские интерфейсы может сыграть на руку и позволить совсем так незаметненько полностью перейти на безпрефиксную запись и никто даже ничего не поймет и не заметит :)

Link to comment
Share on other sites

  • 0
Что вот тут вот сложного?

Для меня — пожалуй, вложенность систем координат. От чего отсчитываются координаты прямоугольника (от viewBox-а или от width/height), на что из этого умножаются проценты в стопах и т.п. Плюс про preserveAspectRatio надо тупо знать, тот же Иллюстратор его по умолчанию не ставит, а без него бидапичаль. Ну и вообще, после того, как HTML годами отучал от записи оформления в тегах, приходится переступать через какие-то устоявшиеся привычки :)

да -webkit- но тут пока что safari 6 его хочет, 7-ая уже без префикса, ну и мобильные андроиды

Причем Сафаря тоже в основном мобильная, имхо. Учитывая спорную репутацию iOS7, 6-я версия может оказаться более долгоживущей, чем предыдущие. В свете всего этого я считаю, что 1 строчка с префиксом всё же «меньше писать» по сравнению с целым файликом на другом языке, поэтому добавить поддержку iOS6-/Андроидов мне труда совсем не составляет, а IE9 обойдется :). Но в любом случае делать SVG-файлик на случай, если браузер не поддерживает беспрефиксного градиента... ну никак, никак не могу отделаться от ощущения, что это очень напоминает вот этот сюжет :)

Link to comment
Share on other sites

  • 0
Для меня — пожалуй, вложенность систем координат. От чего отсчитываются координаты прямоугольника (от viewBox-а или от width/height), на что из этого умножаются проценты в стопах и т.п.

От viewBox. Грубо говоря таким образом задаешь реальные размеры полотна

Но в любом случае делать SVG-файлик на случай, если браузер не поддерживает беспрефиксного градиента... ну никак, никак не могу отделаться от ощущения, что это очень напоминает вот этот сюжет

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

Учитывая спорную репутацию iOS7, 6-я версия может оказаться более долгоживущей, чем предыдущие.

Да я думаю обновятся все быстро. Во-первых по собранным мною сведениям среди друзей, друзей знакомых друзей и знакомых знакомых, то большинству все таки нравится новая iOS. Во-вторых подавляющее большинство пользователей которые обновились и им не понравилась новая iOS просто не смогут откатить ее назад. Останется только совсем небольшой процент пользователей которые соображают как откатить систему. :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Antoshka007
      Всем привет!
      Никак не могу разобраться, в чем тут дело. В интернете тоже никакой информации о таком странном поведении браузера не нашел.
      Все браузеры корректно загружают файлы, кроме Safari. Подписываюсь на событие progress объекта XMLHttpRequest.upload и вывожу в консоль данные о загрузке файлов:
      console.log(e.loaded + ' from ' + e.total + ': ' + e.loaded / e.total * 100); И вот, что вижу в консоли: (см. фото)
      Текст "Данные полностью загружены на сервер!"  выводится внутри обработчика события XMLHttpRequest.upload.onload.
      То есть когда данные, казалось бы, полностью загрузились, Safari как будто повторно пытается их загрузить. 
      Кто-нибудь сталкивался с такой проблемой?
      P.S.: Загрузка осуществляется по средством jQuery.ajax:
      xhr: function() { _xhr = $.ajaxSettings.xhr(); _xhr.upload.onprogress = function(e) { console.log(e.loaded + ' from ' + e.total + ': ' + e.loaded / e.total * 100); }; return _xhr; } До этого делал нативным способом. Поведение не меняется.
      Спасибо!

    • By fenix_63
      Всем привет! Народ, есть лендинг: http://fenix-63.hol.es/bulvar/  Вот эта часть (раздел цены и условия занятий): https://fotki.yandex.ru/next/users/tltfenix/album/74102/view/998283  в браузере Safari выглядит очень ужасно.  CSS-свойство overflow:hidden тут как то по-другому работает. Народ, подскажите, как это исправить? А то я уже голову сломал.
       
       

    • By Windowl
      Есть такая проблема.. Верстаю сайт, адаптирую, все отображается ровно во всех браузерах, кроме сафари на маке и Ipad. Не пойму в чем проблема. 

      http://yana23fv.bget.ru/ - вот сайт 

      Вот так выглядит в сафари - так в хроме
      Сафари - хром

      Может кто знает в чем дело? Спасибо
    • By whiteworking
      Добрый день, такая проблема:
      устроился на стажировку в веб студию, сразу дали решить/устранить проблему в их уже существующем проекте. 
      - сайт: http://en.uff.fr
      - суть проблемы: на главной странице внизу, в диве с классом container, расположены на черном фоне логотипы продуктов(svg картинки). Реализовано всё через display:flex.
       Во всех браузерах отображение правильное кроме safari. Там поведение картинок такое что у них разные размеры и они как-бы *в куче*. Я гуглил эту проблему на англоязычных источниках и единственным советом был просто префикс -webkit-, но это уже учтено и всё равно правильного отображения мы не добились. Есть какой-то способ решить эту проблему? Заранее спасибо.
    • By Antoshka007
      Всем привет!
      Никто не сталкивался с такой проблемой в Safari: при загрузке файлов на сервер (когда загрузка протекает не очень быстро) в событии progress свойство e.total увеличивается в 2 раза? То есть e.loaded принимает значение e.total, а после этого e.total становится 2*e.total и e.loaded снова начинает расти.

      Заранее спасибо!
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy