0,0
рейтинг
2 апреля 2012 в 18:46

Разработка → Ошибка в большинстве браузеров



Предыстория :


Как то неожиданно появился заказ на создание интересного эффекта на сайте. Работа вроде и простая но и в одно время требовала немного подумать. Сам я занимаюсь уже 3 года версткой. И ничего подобного не делал. Оценил разработку и согласился. Но тут меня ждали подводные камни и ошибка которую я обнаружил в 1 варианте затрагивает браузеры Opera Next (12.00 alpha b.1351). Что же касается Google Chrome 19 (dev) и Mozilla FF 11 (release), IE9-10 — тут все в порядке. Во 2 варианте сдался Chrome.


Часть 1я. Прелюдия.

И так суть бага заключается в: ошибках разбора Opera Presto rendering engine 2.10 и каком то движке IE. Баг очень редкий так как комбинация подобных правил css2 и css3 очень редка.
Заглянем на официальную страницу Presto.



Мы видим полную поддержку css3 border-radius.

Напишем достаточно простой html код:


ссылка на код.

И так задача, нам нужен блок размером 150х150px с,
overflow:hidden;

а внутри блок с размером 400х400px казалось бы в чем загвоздка? Ведь многие кто делал сам «карусели», использовал данное свойство.

Результат во всех браузерах ожидаемый ( ссылка на пример ):


Вот тут подходим к сути ошибки, мне потребовались «окошки», я решил не резать кучу картинок, а просто воспользоваться css3 свойством добавив к классам .p1 и .p2 :
border-radius:100%;

которое работает во всех последних версия популярных браузеров.


Вот тут то и пошла жара.
Написав подобный код я увидел: в Chrome 19 и FF 12, и в IE вполне ожидаемый результат:


Открыв Opera Next 11 alpha, я обнаружил следующее ( ссылка на пример ):


Что это? как? почему? — эти вопросы у меня возникли.


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

Часть 2я. WTF?!

Но мало того мне понадобилось еще одно свойство, которое, мне показалось, что вполне комбинируемое хотя бы в Chrome и FF.
Но тут меня опять ждала большая печаль.

Ссылка на код.

Добавив реальное позиционирование относительно текущего места сдался и Chrome 19 dev, Opera Next 11 также не подавала признаков жизни.
Результат Chrome,Opera (ссылка на пример):



А вот кто действительно удивил так это движок FF и IE он прошел испытание!


Хочу выразить спасибо skobkin за дискуссию на данную тему.
Выводы :

Для себя я обнаружил что надо всегда следить и изучать поведение css «правил».
Увы я не нашел способ. Но! есть небольшой можно сказать хак для реального позиционирования это использовать свойства margin.

Я постарался сделать статью с обзором ошибки и думал о нормальной дискуссии на тему: «почему?». А получил лишь нытиков и педантов. Спасибо хабр!


Решил добавить к статье (спасибо zapimir) :


Еще как важна, нужно понимать, что в IE несколько движков, и если нет doctype, то хоть в dev tools заглядывать нужно, прежде чем утверждать, что именно в IE 9, что-то не работает.

Вообще к сожалению различных косяков рендеринга хватает. И кстати как раз IE 9 радует вниманием к мелочам.
Вот к примеру такая банальная вещь, как border и border-radius. Вроде все давно это поддерживают, но если сделать к примеру тип границы dotted, то браузеры начинают чудить.
image

IE9 как по мне самый правильный рендеринг выдает (точки круглые и равномерно распределены по границе, не накладываясь друг на друга), Chrome считает, что точки при увеличении становятся четырехугольными. В Opera и FF точки накладываются в FF это особенно коряво выглядит.

Посмотреть можно на этой странице.

PS: Данная ошибка отправится в баг-трекер оперы и хрома.
PS2: Если вы нашли ошибку в статье просьба писать в личку.
PS3: Очень хочу чтобы мне написали в личку за что минусуем. Я люблю критику.
PS4: Я естественно тестировал с док тайпом. На реальном проекте. Он закрытый и я не могу показать ни его ТЗ ни его самого. Я все понимаю но обвинять в плевках сообществу меня не стоит.
PS5: Добавил док тайп и сделал валидный документ — ура!.
PS6: Шутка про png и jpeg не актуальна.
PS7: Чтоб не раздражать глаз код сделал изображениями и помести ссылки на соответствующий код.
PS8: Переместил примеры на jsfiddle.
Поддубный Дмитрий @mr47
карма
4,0
рейтинг 0,0
Frontend ninja
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (60)

  • 0
    А как исправили-то?
    • 0
      Увы я не нашел способ. Но! есть небольшой можно сказать хак для реального позиционирования это использовать свойства margin.
  • +18
    image
    • +6
      Я тоже люблю png, но подумал что суть оно не поменяет.
      • +3
        Так если любите, почему не использовали его?
        • +13
          я — дурак, не сохранил оригиналы.
          • 0
            очень самокритично, но вданном случае жпег предпочтительнее, так как имхо смотрится норм
            пнг предпочтительнее когда в жпеге заметны артефакты или если нужна анимация, а цвета терять не хочется
    • 0
      Любителям PNG отрежут голову, а адептам JPEG пробьют затылок?
      • +3
        Шутка про png и jpeg уже не актуальна.
    • +1
      Шутка про png и jpeg не актуальна. Вот вам ответ!
  • +25
    После того, как я к вашему тесту дописал доктайп он стал внезапно красиво открываться в IE9.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    Я думаю, это вполне логично. Неясно, как браузер должен реагировать на ваши огрызки html.
    • –28
      Я понимаю. Но тут важна суть, а не доктайп.
      • +29
        Вы, только что, плюнули всему сообществу в лицо.
        • +1
          Я естественно тестировал с док тайпом. На реальном проекте. Он закрытый и я не могу показать ни его ТЗ и его самого. Я все понимаю но обвинять в плевках сообществу меня не стоит.
          • НЛО прилетело и опубликовало эту надпись здесь
            • +6
              Ну как мне вам доказать что я «не олень»?
              • НЛО прилетело и опубликовало эту надпись здесь
            • –12
              Вы не поверите, но доктайп — это тег для валидаторов, а не для браузеров. Браузеру не важно какой именно доктайп, важно его наличие. Есть только 2 режима: «есть доктайп» и «нету доктайпа» (режим совместимости до эры w3c). А какой именно доктайп браузерам без разницы (Именно поэтому ИЕ6 работает нормально, если есть доктайп вида <!doctype [что угодно либо вообще без ничего]>). И уверен, что также отсутвие доктайпа не влияет на отображение ксс3, т.к. в «эпоху до w3c» ксс3 вообще не было. Пруф искать лень, кому нужно — нагуглят. А mr47 минусуют зря доктайп-дрочеры.

              По поводу бага — давно его заметил, но т.к. нужно редко такое отображение — забивал. Респект автору, что добрался до багтрекеров.
              • –4
                Точнее не доктайп-дрочеры, а валидатор-дрочеры.
              • НЛО прилетело и опубликовало эту надпись здесь
                • 0
                  То есть вы думаете, что разработчики браузерах когда реализуют рендер ксс3 будут плодить 2 варианта его отображения — quirck и strict? Зачем им это? Если уж показывают, то явно как в стрикте. Но да, могут не показывать вообще. Но всяко не будут показывать ошибочно. Это конечно домыслы, но это логично, я считаю.

                  > с третьими — отходят от стандартов в ряде особых случаев.

                  Покажите мне, пожалуйста, два примера с доктайпами «строгий» и «переходный» и чтоб они по разному рендерились в норм браузерах.
                  • НЛО прилетело и опубликовало эту надпись здесь
                    • +2
                      Спасибо. Узнал новое.
              • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          И спасибо за понижение кармы.
        • +1
          Не надо говорить от лица всего сообщества.
          • 0
            Я и не говорю от лица сообщества, я говорю о том что он сделал с сообществом.
      • +1
        Я понимаю. Но тут важна суть, а не доктайп.

        Т.е. вы сознательно сделали т.н. «тесты», которые по сути являются кусками невалидного xml-подобного языка и удивляетесь, что разные браузеры по разному это обрабатывают? Я правильно понял?
        • 0
          Добавил доктайп и сделал «кошерную» разметку.
          • +4
            Кстати разу уж добавили нормальную разметку, то и статью неплохо бы поправить, так как IE 9 показывает точно также, как FF.
      • 0
        Вы вот, вы вот это сказали, а в мире, из за вас, тиран вы эдакий, умер котёнок только что!
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Добавил доктайп и сделал «кошерную» разметку.
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              Я понял и сделал выводы спасибо!
              • НЛО прилетело и опубликовало эту надпись здесь
      • +8
        Еще как важна, нужно понимать, что в IE несколько движков, и если нет doctype, то хоть в dev tools заглядывать нужно, прежде чем утверждать, что именно в IE 9, что-то не работает.

        Вообще к сожалению различных косяков рендеринга хватает. И кстати как раз IE 9 радует вниманием к мелочам.
        Вот к примеру такая банальная вещь, как border и border-radius. Вроде все давно это поддерживают, но если сделать к примеру тип границы dotted, то браузеры начинают чудить.

        IE9 как по мне самый правильный рендеринг выдает (точки круглые и равномерно распределены по границе, не накладываясь друг на друга), Chrome считает, что точки при увеличении становятся четырехугольными. В Opera и FF точки накладываются в FF это особенно коряво выглядит.

        Посмотреть можно на этой странице.
        • +2
          Надо признать, что вариант с dashed-границами тоже хорошо отрендерил только IE9.
          • +9
            Ага, за dashed остальным браузерам вообще стыдно должно быть :) Называется сделали для галочки. Сделаю еще один наглядный скрин, а на страницу добавил вариант с dashed.

            • +3
              Хотя у FF всё-таки что-то симметричное, относительно диагонали прямоугольника… Прелесть прям.

              P.S. Вот так вот, пока все гнались за проприетарными и CC3 свойствами, MS срубили фишку и сделали старое, но хорошо.
              • НЛО прилетело и опубликовало эту надпись здесь
                • 0
                  Вот, блин, и правда, спасибо!
              • +2
                Наверное Вы имели ввиду 'симметричное относительно центра прямоугольника' </зануда>
    • –1
      Chromium 17 do not work. :(
  • +2
    В IE10 отрабатывает хорошо.
    Вообще это до слез обидно, когда РАБОТАЕШЬ, а на выходе такое УГ.
  • –2
    А вконтакт всё равно продвигает Chrome…
    • НЛО прилетело и опубликовало эту надпись здесь
      • НЛО прилетело и опубликовало эту надпись здесь
    • –3
      О как. В том посте минусовали сторонников хрома, а тут его фанаты заминусовали карму.
  • 0
    В Safari отображается кстати точно также как и в Chrome.
    • +10
      Неудивительно, оба на движке webkit.
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Написали так, будто открыли Америку :) Это просто недоделки и неопрятности рендеринга. Подобных примеров еще много. Не минусовал.
    • +1
      Кстати, с того момента, когда я обнаружил «ошибку» с border-radius в сочетании с border-style: dotted/dashed, Вебкит сделал большой шаг. Раньше он рисовал примерно как Firefox и даже хуже. Кстати, я сомневаюсь, что текущий вид точек в Хроме можно считать неправильными.

      По поводу Оперы. Там нет наложений. Это неточность в верхнем левом углу, где начало отрисовываемой границы соединяется с ее концом. Ошибка состоит в том, что точки не раставляются на таких расстояниях между собой, чтобы расстояние между первой и последней точкой было такими же, как и между остальными точками. Увидеть это можно, если вы сделаете изменение ширины блока при наведении мыши (:hover) с плавным переходом (Transition): jsfiddle.net/Anton_Diaz/5Cn7H/
      • 0
        Ан-нет, у Хрома, оказывается, тоже есть проблема с расстояниями между точками, как у Оперы. Просто там вместо уменьшенного отступа наблюдается увеличенный отступ.
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        А я и не отрицал того, что эти недоделки и неопрятности идут вразрез спеке :)
  • 0
    Уважаемый, а почему вы не засунули код просто в <source>?
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        code — это для внутристрочного кода. когда объясняются, например, переменные.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.