Странный непоследовательный рендеринг в Google Chrome

Question

Когда я просматриваю эту веб-страницу в Chrome

https://www.doctle.com/users/feedback/

, она рендерится непоследовательно.

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

Чтобы воспроизвести ошибочное поведение, просто обновите страницу несколько раз, и вы увидите несоответствие.

[Ошибочный рендеринг] -https://www.doctle.com/error.jpg

Пожалуйста, помогите.Снимок экрана содержит ту же страницу без каких-либо различий в файлах на стороне сервера.Я проверил в Firefox, и это несоответствие не там.Откройте страницу в Firefox для справки.

Заранее спасибо.

Answer 1

Это возможное решение проблемы.Когда я запускаю инструмент аудита Chrome, который находится в инструментах разработчика, я получаю следующее (среди нескольких других вещей, которые не должны быть причиной этой проблемы):


Оптимизировать порядокстили и сценарии (2)

Следующие внешние CSS-файлы были включены после внешнего JavaScript-файла в заголовок документа.Чтобы обеспечить параллельную загрузку файлов CSS, всегда включайте внешний CSS перед внешним JavaScript.

simple-image-link.css
style.css

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

Answer 2

Я обнаружил еще один фактор, который может способствовать непоследовательному рендерингу в Chrome ... Пробелы!

У меня был горизонтальный ряд с тремя полями, в котором точно заполните ширину строки, и время от времени Chrome будет переносить третье окно на следующую строку, хотя теоретически это будет соответствовать.После более тщательного изучения я обнаружил, что в этих случаях между первым и вторым полем было несколько дополнительных пикселей ... Из прошлого опыта я знал, что это может быть связано с пробелами, поэтому я удалил все пробелы между тегами open и closeиз трех коробок.Я изменил:

<div class="row">
   <div class="box">
      Some box content...
   </div>
   <div class="box">
      Some box content...
   </div>
   <div class="box">
      Some box content...
   </div>
</div>

На:

<div class="row"
   ><div class="box">
      Some box content...
   </div
   ><div class="box">
      Some box content...
   </div
   ><div class="box">
      Some box content...
   </div
></div>

Обратите внимание, как я переместил закрывающую угловую скобку закрывающих элементов на следующую строку, убедившись, что между пробелами вообще нет пробелов.закрытие и открытие тегов.Эта проблема на самом деле очень старая, но в основном, когда она кусает вас, она кусает вас постоянно.Только в Chrome я видел это противоречивое поведение.

Я знаю, что на этот вопрос уже дан ответ, но он очень высоко ценится в Google при поиске "непоследовательного рендеринга Chrome", и предлагаемый ответ не исправилпроблема для меня, поэтому, после того, как я наконец нашел решение в моей ситуации, я подумал, что было бы хорошо добавить его сюда для других, имеющих такую ​​же проблему.

Answer 3

У вас есть

#headerbar {
    float: right;
    clear: right;
    margin: 0px;
    padding: 0px;
    display: inline;
    height: 112px;
}

Плавающий элемент - это блок, вы указываете его в строке и пытаетесь определить его высоту. Я прошу вас прочитать документ , чтобы узнать, как работают CSS-блоки.