Jump to content
  • 0

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

forest_moss

Asked by forest_moss,

 Share

Question

forest_moss Explorer

forest_moss

Posted
Posted (edited)

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


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

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
Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0
forest_moss Explorer

forest_moss

Posted
  • Author
Posted

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

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

 

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

Link to comment
Share on other sites
  • 0
McLotos Explorer

McLotos

Posted
Posted (edited)

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

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

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

Edited by McLotos
Link to comment
Share on other sites
  • 0
forest_moss Explorer

forest_moss

Posted
  • Author
Posted (edited)

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
Link to comment
Share on other sites
  • 0
forest_moss Explorer

forest_moss

Posted
  • Author
Posted

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

 

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

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

 

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

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

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

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

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

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

 

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

VtB0TJiyT6o.jpg

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

A7D0aso-8IY.jpg

Link to comment
Share on other sites
  • 0
afdw Explorer

afdw

Posted
Posted

 

 

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

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

 

Windows

 

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

Link to comment
Share on other sites
  • 0
forest_moss Explorer

forest_moss

Posted
  • Author
Posted (edited)

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

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

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

Edited by forest_moss
Link to comment
Share on other sites
  • 0
afdw Explorer

afdw

Posted
Posted

 

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

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

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

 

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

Link to comment
Share on other sites
  • 0
forest_moss Explorer

forest_moss

Posted
  • Author
Posted

 

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

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

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

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

Link to comment
Share on other sites
  • 0
afdw Explorer

afdw

Posted
Posted (edited)

 

 

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

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

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

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

 

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

Edited by afdw
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
Go to question listing

  • Similar Content

    • Ospna
      Почему некорректно отображаются иконки
      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
    • Vic-Tor
      Тайминг мерцания
      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;
        }
      }
      СПАСИБО!
    • Antoshka007
      Проблема с загрузкой файлов в Safari.
      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; } До этого делал нативным способом. Поведение не меняется.
      Спасибо!

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

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

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

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

      Может кто знает в чем дело? Спасибо
×
×
  • 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

  I accept