Oper'ные приколы с first-line

    Недавно наткнулся на дикий баг с блочными элементами и псевдо-классом :first-line в опере, поспрашивав гугл, понял что мало кто с ним сталкивался.
    Допустим нам надо сделать вот такой вот заголовок, и просто необходимо чтобы у него был float:left





    Но где-то на странице внутри блока с классом whereIAm есть еще один заголовок h2 у которого первую строчку нужно перекрашивать в кислотный цвет.
    Всё достаточно тривиально:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Не фича | Opera</title>
        <style type="text/css">
          h2 {
            float: left;
            
            font-family:Verdana, sans-serif;
            padding: 5px;
            font-weight: 300;
            border: 4px solid #97D95C;
            background: #D9FF77;
            color: #437346;
          }
          .whereIAm h2:first-line{
            color: lime;
          }
        </style>
      </head>
      <body>
        <h2>Оперный Баг</h2>
      </body>
    </html>


    * This source code was highlighted with Source Code Highlighter.


    вуаля в IE5.5+, safari, firefox и хроме эффект достигнут, однако опера (тестил в 10.10, и 9.64) показывает следующее:


    и если убрать правило .whereIAm h2:first-line, либо добавить класс для заголовка:
    .whereIAm h2.target:first-line всё приходит в норму

    может кто-нибудь знает почему и КАК это происходит?
    Share post

    Similar posts

    Comments 66

      +3
      Помогает <h2>Оперный Баг<br></h2>
        +30
        Вам хорошо. Вас от такой конструкции не тошнит :(
        +1
        Я же правильно понимаю, что вы написали баг-репорт перед публикацией топика?
          +5
          каюсь, только после публикации )
            +9
            А вы уверены, что это баг?
            jigsaw.w3.org/css-validator/
            «Предупреждения (1)
            URI: file://localhost/opera bug.html
            8 h2 In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected»

            Если добавить для h2 ширину (я добавил «width: 163px;»), то всё начинает отображаться нормально.
              +1
              уверен, так как если убрать css правило которое НИКАК к этому элементу не относится, всё отображается нормально, что я собственно в конце поста и написал.
              • UFO just landed and posted this here
                  +1
                  мало опыта пока, поэтому и воспользовался флоатом, спасибо за развернутый комментарий, учту на будущее (=
                  • UFO just landed and posted this here
                      0
                      -moz-inline-block?
                        0
                        В FF2 для имитации display: inline-block используется display: -moz-inline-stack. И всё равно это будет не одно и то же что и inline-block. О подводных камнях использования -moz-inline-stack вот тут.
                          0
                          -moz-inline-box )

                          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
                          <html dir="ltr">
                          <head>
                          <title>Пустая страница</title>

                          <style>
                            div {
                              display: inline-block;
                              display: -moz-inline-box;
                              border: 1px solid black;
                              margin: 40px;
                            }
                          </style>
                          </head>
                          <body>

                          <div>
                            Привет!
                          </div>

                          </body></html>


                          * This source code was highlighted with Source Code Highlighter.
                            0
                            Хм… к сожалению на Mozilla Developer Center нет описания ни одного из этих свойств. Ни -moz-inline-stack, ни -moz-inline-box, ни -moz-inline-block. Поэтому трудно судить какое из первых двух лучше использовать.

                            Вроде как для фикса используются и -moz-inline-stack, и -moz-inline-box. А какая между ними разница даже не знаю. Но опять таки вот тут автор пишет, что -moz-inline-box ещё более проблематичен в использовании чем -moz-inline-stack.
                              0
                              Вот тут ничего о проблематичности использования -moz-inline-box не написано )

                              Автор какбы говорит, что, на сколько он, какбы, знает, лучшее свойство для эмуляции инлайн-блок — -moz-inline-stack, и приводит проблемы этого решения.
                                0
                                Вот тут ничего о проблематичности использования -moz-inline-box не написано )
                                Читайте два последних комментария.
                                0
                                Сколько раз ни делал инлайн-блок, в ФФ2 ставил инлайн-бокс, и проблем небыло.

                                Хотя мой опыт, конечно-же, не репрезентативен.
                                • UFO just landed and posted this here
                                    0
                                    Да, мой опыт не репрезентативен. ))

                                    Но всё же, пункты меню можно сделать флоатами или совсем инлайнами.
                      +3
                      Не соглашусь с вами, что значит «использование стандартов в непредвиденных авторами9 браузеров целях»? У авторов брузеров нет целей навязывать как либо использовать стандарты. У них есть задача — обеспечить поддержку стандарта, и желательно чтобы это работало быстро. К сожалению в погоне за оптимизацией или ввиду плохой реализации мы получаем баги, когда движок браузера выводит блоки совсем не так как ожидается.
                      В любом случае не важно для чего придумывалось свойство float, хотя оно всегда считалось универсальным (для любых элементов) — важно как оно используется «сегодня» (уже несколько лет), и браузерные движки давно это учитывают (по крайней мере должны). Хотя в этом нет необходимости так как в стандарте описано поведение-правила и их нужно соблюдать.
                      А еще вы пишите «Не забывайте, для чего первоначально был предназначен Float...» и тут же «можно прекрасно использовать таблицы» — так вот таблицы первоначально были предназначены для вывода табличных данных, а потом их стали использовать для верстки, так как по другому не умели, но вас это не смущает. inline-block тоже не лучший вариант: до недавнего времени Firefox (то есть движок gecko) не поддерживал это значение, а его эквивалент -moz-inline-block изрядно глючил. Ко всему прочему float, <table> и inline-block — совершено разные темы и совсем не взаимозаменяемые.
                      Что же касается статьи, то это баг браузера. Искать объяснения бесполезно — как часто бывает в случае с Opera: браузер сэкономил миллисекунды на дополнительных расчетах в следствии оптимизации, наградив пользователя неверной картинкой.
                      • UFO just landed and posted this here
                          +2
                          Приятно получить адекватный ответ (признаться боялся, что начнется холивар). Теперь возражений нет :)
                          Ничего странного в том, что те люди, которые «сочиняют» стандарты и те, что разрабатывают браузеры (движки) — это одни и те же люди. Кому как не им знать, как и что лучше сделать. Проблемы же, которые сейчас не дают спокойно жить веб-разработчикам связаны с тем, что стандарты (например, тот же CSS2.1) не так хорошо продумали, поспешили… Причина банальна — никто толком не знал как это все можно использовать и как это будет работать, а реализовать хотелось уже «сейчас». Лишь спустя несколько лет от принятия CSS2.1 стало более менее понятно, что собственно ожидается от CSS — а после оказалось, что в стандарте много белых пятен, что-то лишнее, чего-то наоборот не хватает — и каждый браузеростроитель по-своему решал задачу, когда удачно, когда нет.
                          Еще один аспект заключается в том — как браузеростроители добиваются своих целей. Практически все браузеры имеют, а сейчас большинство из современных браузеров, к всеобщей радости, имеЛИ проблемы с рендерингом, специфичные именно для конкретного браузера, которые связаны с оптимизацией — побыстрее отдать «картинку» пользователю. Все мы помним про печальный hasLayout у IE и прочие неприятности, у gecko были проблемы с перекрытием абсолютно-позиционированных блоков, полупрозрачностью и кареткой (у полей ввода), у webkit случались проблемы с расчетами размеров блоков и фоновыми изображениями. Про Opera можно говорить много, так как багов от версии к версии не уменьшается, или они меняются. У меня разваливались динамически генерируемые таблицы (до этого никогда не думал, что таблица может вообще как либо образом развалиться), постоянно какие то патологии с gif'ами, а последние версии «порадовали» повтором background со значением no-repeat (пока не будет какой-то перерисовки), отсутствие перерисовки некоторых областей (опять же пока не будет какой-то общей перерисовки, например не переключишь закладки туда-обратно), расчетом размеров блоков, выпадение скролбара при overflow-x: hidden & overflow-y: scroll, или «хит-сезона»: <textarea> возвращает пустую строку для свойства value при определенной верстке, хотя там есть текст, и далее далее…
                          Опять же ругать Opera можно долго, но я думаю, что разработчики затачивали браузер для отображения статичных страниц — и тут да, более менее все корректно в большинстве случаев. То есть чем-то пожертвовали корректностью ради скорости, которой они так гордятся (или как вы заметили, ради поддержки разных устройств). Что ж — это их выбор. Однако у этого браузера весьма сложно складывается с RIA-приложениями, хотя тут чаще ситация «как повезет» — может и заработает, а может и нет. Главное чтобы прекратилась их их порочная практика "чиним одно, ломаем другое".
                          0
                          … как часто бывает в случае с Opera: браузер сэкономил миллисекунды на дополнительных расчетах в следствии оптимизации, наградив пользователя неверной картинкой.
                          Тут понятно откуда ноги растут. Опера хочет иметь одинаковый движок для всех поддерживаемых устройств. В какой-то момент начали даже с корнем вырывать ранее работающие вещи, скорее всего из-за проблем связанных с производительностью мобильных телефонов.
                        • UFO just landed and posted this here
                          • UFO just landed and posted this here
                            • UFO just landed and posted this here
                            +2
                            А для чего вам необходим float для заголовка? Просто практика показывает, что использование стандартов в непредвиденных авторами браузеров целях часто влечет за собой возникновение подобных проблем.

                            Давайте-давайте поговорим о несуществующей семантике в CSS. :)
                            CSS — это технология отображения (рендеринга), и отрабатывать в идеале должно всё, и во всех возможных сочетаниях и вариациях.
                          +5
                          Гм, а вроде же для флоатов (и абс. поз. элементов) можно не указывать ширину, тогда она определяетс сама по какому-то алгоритму «shrink-width», т.е. по ширине контента?

                          > www.w3.org/TR/CSS2/visudet.html#float-width

                          > If 'width' is computed as 'auto', the used value is the «shrink-to-fit» width.
                          • UFO just landed and posted this here
                              0
                              Кстати, буквально на днях, верстая многоколоночный макет, наткнулся на такую ошибку, так же связанную с некорректным расчётом ширины «shrink-to-fit».
                                +1
                                В 9.2 такой проблемы нет. Опера хромает от версии к версии. Каждый раз новые сюрпризы.
                                  0
                                  Да уж, в 10.01 баг присутствует
                            • UFO just landed and posted this here
                              • UFO just landed and posted this here
                            –32
                            о боже!!! непогрешимая опера, радетель стандартов и прочая-прочая-прочая облажалась…
                            как дальше жить?
                            • UFO just landed and posted this here
                                0
                                «отправлен баг DSK-268896»
                                А вы уверены, что неполная поддержка ещё не утверждённых спецификаций CSS3 и HTML5 — это баг?

                                В остальном — естественно, без багов программ нет. Нужны баг-репорты, чтобы разработчики знали, с чем сталкиваются в работе пользователи.
                                • UFO just landed and posted this here
                                    –1
                                    Разработчики разных браузеров уделяют и разное внимание реализациям спецификаций будущих версий. Приоритетность разная и зависит от множества других факторов. Но раз баг-репорт есть — будут разбираться. Пока до этого номера ещё проверка не дошла.
                                    • UFO just landed and posted this here
                                        +1
                                        Про это, насколько я знаю, в курсе. Почему не исправляют — не знаю.
                                          0
                                          Производительность на мобильных телефонах упадёт, т.к. тут операций с запятой больше требуется, так же, возможно, памяти немного больше отжирать будет.

                                          Короче, ждать исправления в ближайшие годы даже не стоит.
                                          • UFO just landed and posted this here
                                            • UFO just landed and posted this here
                                      +1
                                      В остальном — естественно, без багов программ нет.

                                      Скорее это относится к большим программам (особенно, браузерам и операционным системам). Уверен, что существует достаточно программ без ошибок вообще.
                                      Например, я уверен, что в написанной когда-то мной игре для ZX-Spectrum багов не было. :)
                                      +4
                                      > Вечные проблемы с отрисовкой: часто не всё отрисовывается в динамике и остаются старые куски. Наглядно видно в твиттере.

                                      Ага, помню, под выдвигающимся меню пришлось поместить невидимый див, высотой с это меню, если его двигать яваскриптом — движение меню прорисовывается, иначе ничего не происходит ((

                                      Вообще, что-то в последнее время Опера, к которой раньше не было особых нареканий, глючит не по детски.
                                        +2
                                        А можно подробнее про прозрачность? Никогда в Опере проблем не было.

                                        Free Image Hosting at www.ImageShack.us

                                        Код
                                        • UFO just landed and posted this here
                                            +2
                                            Неожиданно. Всегда считал, что с прозрачностью проблем нет. Спасибо, что предупредили.
                                            • UFO just landed and posted this here
                                              • UFO just landed and posted this here
                                                • UFO just landed and posted this here
                                          • UFO just landed and posted this here
                                            • UFO just landed and posted this here
                                              • UFO just landed and posted this here
                                              +2
                                              А что будет, если добавить white-space: nowrap?
                                              • UFO just landed and posted this here
                                                0
                                                что интерестно еси указать не float: left a display: inline-block; в 9.64 (10-ки под рукой щас нет) вообще всё пропадает — белая страница

                                                • UFO just landed and posted this here
                                                  +1
                                                  Даёшь на каждый оперовский баг по отдельной теме! ;)
                                                  Может тогда оперовцы зачешутся, хотя, сомневаюсь… А пока давайте надеяться что в Presto 2.3-2.4 была проведена обширная работа над ошибками, а не просто добавлен новый слой CSS 3 над далёким от совершенства CSS 2.
                                                    0
                                                    Указанные фичи/баги срабатывают в и текущей версии Presto 2.4, но ещё не вечер.

                                                    Только вот подумайте, что добавит большей популярности браузеру среди разработчиков — поддержка border-radius и box-shadow или десяток-другой исправленных багов? Я имею в виду дешёвую популярность ;)
                                                      0
                                                      Дешевую популярность бы принесло реализация border-radius ещё года два назад. ;) А сейчас — это уже практическая необходимость.

                                                      А теперь главное, и по теме: движок Opera 9.5 — это сплошные регрессии, просто фронт регрессий, до сих пор не исправленных. Эта тема — просто очередной пример — баг проявляется только в Opera 9.5+ (9.27 — всё ОК).
                                                      • UFO just landed and posted this here
                                                      +2
                                                      Топик позора оперы. Неожиданно сейчас нашел косяк рендеринга уровня шестого ие.

                                                      Вы видите на этой странице комментарий? А он есть, просто он находится на картинке. Но стоит изменить размер окна (вызвать reflow) как он встает куда нужно.
                                                        0
                                                        И, правда, потерянный комментарий.
                                                        И, что вы думаете, — опять баг Opera 9.5+ (9.27 — всё ОК).
                                                          0
                                                          Ну я бы сказал, что в 10.01 всё не ок.
                                                          +3
                                                          Возможность принудительного reflow решила бы многие проблемы (корректная отрисовка при загрузке, замерзание при использовании dhtml). Но Opera — шустрый браузер. Тут главное побыстрее страничку выплюнуть, а результат — разочарование.

                                                          Пользователям IE: «Пожалуйста, обновите браузер!»
                                                          Пользователям Opera: «Пожалуйста, подёргайте за краешек окна!»

                                                        Only users with full accounts can post comments. Log in, please.