Sign in to follow this  
forest_moss

text-shadow и кроссбраузерность - wtf, товарищи о_о

Recommended Posts

всем привет.
у меня появилась проблема того, что тень текста дико коверкается в сафари и в браузере телефона.
неужели этого никак не избежать!?
может, есть какие-нибудь решения, ведь наверно же с этим сталкивались многие другие?


вот пример, здесь все минимизировано:
скришот в разных браузерах:

ka9Z29yuLjw.jpg
код:

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>font</title><style>    body{background: #e5e08b;}    p{    font-family: arial;    color: #ffe;    font-weight:bold;    text-shadow: 0 0 .1ex #ba0, 0 0 .1ex #870, 0 0 .1ex #870,    0 .7ex .1ex #fff,    2ex 0 .5ex #ffd, -2ex 0 .5ex #ffd;    }</style></head><body>        <p>Lorem ipsum</p></body></html>

вот даже ссылка, если кому интересно.

Есть идеи, как правильно обращаться с этой тенью???

или хотя бы как исправить ситуацию в данном случае...

Edited by forest_moss

Share this post


Link to post
Share on other sites

Может это поможет  http://habrahabr.ru/post/94799/

а как задать условные комментарии не для IE, а для сафари? можно ли вообще?

 

И да, может быть, кто-нибудь знает, как тогда задать стиль только для Safari? гугл мне выгает сплошь устаревшую информацию, которая больше не работает.

Share this post


Link to post
Share on other sites

http://caniuse.com/#feat=css-textshadow

А вообще для safari можно юзать -webkit-text-shadow

Если очень хочется отдельный css под safari то можно для начала определить какой браузер у пользователя, а потом если safari то подставить другой css

Edited by McLotos

Share this post


Link to post
Share on other sites

http://caniuse.com/#feat=css-textshadow

А вообще для safari можно юзать -webkit-text-shadow

Если очень хочется отдельный css под safari то можно для начала определить какой браузер у пользователя, а потом если safari то подставить другой css

по ссылке сайт хороший, я туда захожу, но он не объясняет поведения safari (на компьютере), к сожалению.

Если юзать -webkit-, то измененная тень будет и в хроме, а хром отображает тень правильно. т.е. если ее перенастроить, то хром будет как раз неправильно ее показывать.

Как можно определить браузер пользователя и подстроить css под него?

А так вообще только что нашлось трещащее по швам решение: я использую css-хак для сафари, благо нашелся сайт http://browserhacks.com! Не знаю пока, как будет работать, может луше всего будет использовать var isSafari = /constructor/i.test(window.HTMLElement);, но пока что был испробован _::-moz-svg-foreign-content, :root .selector {} и, слава богам, получилось! но это только для новейших версий браузера...

причем браузер в андроиде реагирует на это тоже.

Самое интересное при этом всем - это отображение тени в андроиде. В его встроенном браузере.

Если не задавать meta viewport и просто сильно увеличивать размер шрифта документа, то тень хорошая, примерно как было задумано:

yyKA_1CXZs4.jpg

Однако если указать <meta name="viewport" content="width=device-width, initial-scale=1">, а сильное увеличение шрифта для документа убрать, то тень коверкается:

J0lUxaYh8zk.jpg

Не могу понять, как так.

Получается, этот браузер умеет правильно показывать тень. Просто не хочет. Как бы найти причину и что-нибудь с ней сделать!

а еще если оставить viewport и задать тот большой размер шрифта документу, что был без viewport - 33px - то тень тоже правильно отображается (самому тексту при этом всегда был задан размер font-size:160%)

Edited by forest_moss

Share this post


Link to post
Share on other sites

Ура-ура, решение нашлось и воплощено в жизнь!!!

 

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

Поэтому нужно сделать шрифт достаточно большим, а потом уменьшить его. Уменьшать процентами ничего не даст, шрифт напрямую вернется к необходимому значению. Не знаю, есть ли более удобные способы, но у меня получилось при помощи transform: scale(). К сожалению, при этом возникает куча побочной хрени, но что поделаешь.

 

Если кто-нибудь столкнется с такой же проблемой, то вот нюансы:

 - В опере тень может поменяться не в лучшую сторону (у меня темное обрамление стало еще тоньше).

 - Чтобы уменьшенный текст оказался в итоге на правильном месте, не забываем про transform-origin.

 - Сафари нужен префикс -webkit-.

 - Чтобы текст не переносился на следующие строчки слишком рано, нужно задать увеличенную ширину элементу с текстом. Потому что перенос строчек рассчитывается до scale, как если бы его не было. А чтобы увеличенная ширина не вызывала появление странных прокруток, элементу с текстом можно задать overflow: hidden.

 - Несмотря ни на что, по непонятным причинам, Сафари на видновсе может все равно все подпортить необоснованным отказом от сглаживания шрифта. Когда она их сглаживает, а когда нет, мне пока еще не понятно...

 

И вот, вуаля, так это теперь выглядит  телефоне:

VtB0TJiyT6o.jpg

В сафари при загрузке страницы все сначала выглядит примерно так же, но ненадолго. Это на моей странице. А в отдельном файле шрифт по непонятным причинам остается сглаженным.

A7D0aso-8IY.jpg

Share this post


Link to post
Share on other sites

 

 

поведения safari (на компьютере)

У вас Mac OS X или Windows? 

 

Windows

 

Последней доступной версией Safari для Windows является версия 5.1.7, выпущенная 9 мая 2012 года. Разработка прекращена. Зачем его поддерживать? Кто им пользуется?

Share this post


Link to post
Share on other sites

Последней доступной версией Safari для Windows является версия 5.1.7, выпущенная 9 мая 2012 года. Разработка прекращена. Зачем его поддерживать? Кто им пользуется?

потому что android browser ведет себя практически идентично сафари виндовса, и к тому же нету у меня планшета, чтобы на нем тестировать)

Решена проблема для Сафари - решена и для android browser.

Edited by forest_moss

Share this post


Link to post
Share on other sites

 

Последней доступной версией Safari для Windows является версия 5.1.7, выпущенная 9 мая 2012 года. Разработка прекращена. Зачем его поддерживать? Кто им пользуется?

потому что android browser ведет себя практически идентично сафари виндовса, и к тому же нету у меня планшета, чтобы на нем тестировать)

Решена проблема для Сафари - решена и для android browser.

 

Не всегда. И есть же эмулятор онлайн.

Share this post


Link to post
Share on other sites

 

Не всегда. И есть же эмулятор онлайн.

Спасибо, теперь буду знать, что есть более продвинутые эмуляторы, чем screenify и mobiletest.me :)

Только на моем компьютере ни Manymo, ни предложения гугла не заработали правильно. жаль конечно.

как будет возможность, попробую еще на более мощных компьютерах, чем мой...

Share this post


Link to post
Share on other sites

 

 

Не всегда. И есть же эмулятор онлайн.

Спасибо, теперь буду знать, что есть более продвинутые эмуляторы, чем screenify и mobiletest.me :)

Только на моем компьютере ни Manymo, ни предложения гугла не заработали правильно. жаль конечно.

как будет возможность, попробую еще на более мощных компьютерах, чем мой...

 

Тут вообще не зависит, на сколько мощный компьютер, нужно просто хорошее соединение, так как эмулятор работает в облаке, а вам передаётся только картинка. Если бы это правда был эмулятор на JS, то он бы нормально работал только на суперкомпьютерах (в них даже KolibriOS тормозит  :)). А что за предложения гугла? screenify и mobiletest.me - это просто симуляторы, которые просто уменьшают viewport. Подобные симуляторы, но гораздо более продвинутые, встроены в Chrome и Firefox.

Edited by afdw

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Ospna
      Решил анимировать иконки, нашел пример в интернете, скопировал

      в Safari Версия 11.0.2 (13604.4.7.1.3), в мобильных Safari и Chrome все отображается отлично

      но почему-то иконки неправильно отображаются в Chrome Mac (Версия 63.0.3239.132 (Официальная сборка), (64 бит), Chrmoe Windows и Edge - на переднем плане анимированный градиент, а на заднем иконка
       
      пример кода
      пример того как должна выглядеть анимированная иконка во вложении
      Screen Capture 2018-01-10 06.49.14.mov
    • By Vic-Tor
      Подскажите пожалуйста, как сделать паузу мерцания текста, что бы по глазам не било сильно?
      Посмотреть образец  тут.
      info-box {
      width : 96%;
      background : #c2ddf9;
      border : #CD0000 solid 1px;
      color : #CD0000; font-weight: 800;
      line-height : 19px;
      animation: blur .99s ease-out infinite;
      text-shadow: 0px 0px 2px #fff, 0px 0px 2px #fff;
      }
      @keyframes blur {
        from {
          text-shadow:0px 0px 5px #fff,
            0px 0px 4px #fff, 
            0px 0px 5px #fff,
            0px 0px 5px #fff,
            0px 0px 5px #fff,
            0px 0px 5px #fff,
            0px 0px 9px #fff,
            0px 0px 9px #fff,
            0px 0px 9px #fff,
            0px 0px 9px #fff,
            0px 0px 9px #CD0000,
            0px 0px 9px #CD0000,
            0px 10px 12px #4A708B,
            0px 10px 12px #4A708B,
            0px 10px 12px #4A708B,
            0px 10px 12px #4A708B,
            0px -10px 12px #4A708B,
            0px -10px 11px #4A708B;
        }
      }
      СПАСИБО!
    • 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; } До этого делал нативным способом. Поведение не меняется.
      Спасибо!

  • Member Statistics

    46,514
    Total Members
    3,128
    Most Online
    Marking
    Newest Member
    Marking
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.