Page layout may be unexpected due to quirks mode как исправить

Время на прочтение
5 мин

Количество просмотров 2.7K

Добрый день всем

Старичок IE не перестает нас удивлять и подкидывать все новые проблемы, в самых неожиданных местах.

При работе над проектом столкнулся с неожиданным поведением полей ввода input и textarea при работе IE в режиме quirks mode. И все бы ничего, в общем-то — кого сегодня удивишь странностями и багами IE. Интересное заключается в том, при каких условиях проявляется проблема. В этот раз это происходит в зависимости от того, какие символы вводятся в поле ввода — кириллические или латинские. Кириллица вызывает проявляение проблемы, латинница вводится нормально и проблема не проявляется. Это показалось мне достаточно интересным и я решил поделиться наблюдением собщественностью.

Итак, есть html-документ следующего содержания.

<font size="2" face="Courier New" color="black"><ol><li><font class="rem"><!-- force IE6/7 into quirks mode --></font></li><li><font color="#0000ff"><!</font><font color="#800000">DOCTYPE</font> <font color="#ff0000">HTML</font> <font color="#ff0000">PUBLIC</font> <font color="#0000ff">"-//W3C//DTD HTML 4.01//EN"</font> <font color="#0000ff">"http://www.w3.org/TR/html4/strict.dtd"</font><font color="#0000ff">></font></li><li><font color="#0000ff"><</font><font color="#800000">html</font><font color="#0000ff">></font></li><li> </li><li><font color="#0000ff"><</font><font color="#800000">head</font><font color="#0000ff">></font></li><li><font color="#0000ff"><</font><font color="#800000">meta</font> <font color="#ff0000">http-equiv</font><font color="#0000ff">="Content-Type"</font> <font color="#ff0000">content</font><font color="#0000ff">="text/html; charset=windows-1251"</font> <font color="#0000ff">/></font></li><li> </li><li><font color="#0000ff"><</font><font color="#800000">style</font> <font color="#ff0000">type</font><font color="#0000ff">="text/css"</font><font color="#0000ff">></font></li><li>* { margin: 0; padding: 0; font-family: sans-serif; }</li><li>.wrapper { height: 30px; width: 300px; padding-right: 100px; background: #9ac; }</li><li>  .wrapper input, .wrapper textarea { width: 100%; background: #e0e0e0; }</li><li>  .wrapper textarea { overflow: auto; display: inline; }</li><li><font color="#0000ff"></</font><font color="#800000">style</font><font color="#0000ff">></font></li><li> </li><li><font color="#0000ff"></</font><font color="#800000">head</font><font color="#0000ff">></font></li><li> </li><li><font color="#0000ff"><</font><font color="#800000">body</font><font color="#0000ff">></font></li><li> </li><li> </li><li> </li><li><font color="#0000ff"><</font><font color="#800000">div</font> <font color="#ff0000">class</font><font color="#0000ff">="wrapper"</font><font color="#0000ff">><</font><font color="#800000">input</font> <font color="#ff0000">type</font><font color="#0000ff">="text"</font> <font color="#0000ff">/></</font><font color="#800000">div</font><font color="#0000ff">></font></li><li> </li><li><font color="#0000ff"><</font><font color="#800000">div</font> <font color="#ff0000">class</font><font color="#0000ff">="wrapper"</font><font color="#0000ff">><</font><font color="#800000">textarea</font><font color="#0000ff">></</font><font color="#800000">textarea</font><font color="#0000ff">></</font><font color="#800000">div</font><font color="#0000ff">></font></li><li> </li><li> </li><li> </li><li><font color="#0000ff"></</font><font color="#800000">body</font><font color="#0000ff">></font></li><li> </li><li><font color="#0000ff"></</font><font color="#800000">html</font><font color="#0000ff">></font></li></font></ol><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font>

Режим quirks для отображения в IE6/7 выбран осознанно, это необходимое начальное условие.

На словах: есть блок некоторой заданной ширины (в % или px), которому задан дополнительно отступ справа. Внутри этого блока содержится поле ввода input или textarea.

Известно, что в режиме quirks, IE любит считать ширину, включая в нее padding. Кроме того известно, что в этом режиме размеры inline-элементов реагируют на свойства ширины и высоты. Т.е. для input и textarea можно указать ширину, что и сделано: ширина задана в % родительского блока. Для наглядности пусть будет 100%. В соответствии с этим, ширина вложенных input и textarea, пока они не заполнены, составляет ширину родительского контейнера минус его отступ справа.

Fun starts, когда пытаемся что-то ввести в поля. При введении в input кириллических символов внешний отступ содержащего поле контейнера исчезает и поле «разъезжается» на всю ширину. Если вводить латинские символы — проблема не проявляется. C textarea проблема проявляется независимо от того, кириллические символы вводятся или латинские. Такое поведение наблюдается на IE6/7 под WinXP SP2.

Вот изображение того, что происходит:

Как избавиться от этого «разъезжания» input и textarea и с чем может быть связана такая «аллергия» именно на кириллические символы для меня остается загадкой. Если кто-то подскажет способ решения проблемы буду очень благодарен.

Describe the bug

Chrome browser reports that /protocol/openid-connect/login-status-iframe.html iframe is lacking of <!DOCTYPE html> tag that could lead to render in unexpected ways.
https://web.dev/doctype/?utm_source=devtools
Please add it to
keycloak/adapters/oidc/js/src/main/resources/login-status-iframe.html

Version

keycloak-angular: 8.4.0, keycloak-js: 15.0.2

Expected behavior

keycloak/adapters/oidc/js/src/main/resources/login-status-iframe.html should have a <!DOCTYPE html>

Actual behavior

No response

How to Reproduce?

Open page with login-status-iframe.html available at the page

Anything else?

No response

nytux	#61 Оставлено : 17 марта 2023 г. 16:29:05(UTC)
Статус: Новичок Группы: Участники Зарегистрирован: 17.03.2023(UTC) Сообщений: 6 Откуда: Йошкар-Ола Поблагодарили: 3 раз в 1 постах	Для тех у кого не получается сохранить для переопределения. Попробуйте перед этим пролистать в маленьком баре, до переопределений. И выбрать папку на компе, любую. Куда затем браузер сможет сохранить файл https://user-images.gith…95-a432-59b2906faada.png

kosmos321	#62 Оставлено : 17 марта 2023 г. 16:37:15(UTC)
Статус: Новичок Группы: Участники Зарегистрирован: 17.03.2023(UTC) Сообщений: 4	Автор: nytux Для тех у кого не получается сохранить для переопределения. Попробуйте перед этим пролистать в маленьком баре, до переопределений. И выбрать папку на компе, любую. Куда затем браузер сможет сохранить файл https://user-images.gith…95-a432-59b2906faada.png папку выбрал, ничего не изменилось

AlfaM	#63 Оставлено : 17 марта 2023 г. 16:44:14(UTC)
Статус: Новичок Группы: Участники Зарегистрирован: 17.03.2023(UTC) Сообщений: 1 Сказал(а) «Спасибо»: 1 раз	Автор: kosmos321 Автор: nytux Для тех у кого не получается сохранить для переопределения. Попробуйте перед этим пролистать в маленьком баре, до переопределений. И выбрать папку на компе, любую. Куда затем браузер сможет сохранить файл https://user-images.gith…95-a432-59b2906faada.png папку выбрал, ничего не изменилось После выбора надо нажать сверху разрешить и поставить галочку enable local overrides. Кстати тоже отображалось всё одной строчкой. Просто нашел фрагмент me.getFormPanel().setLoading(a) – удалил его, сохранил и подписалось.

EkaterinaSt	#64 Оставлено : 17 марта 2023 г. 16:54:45(UTC)
Статус: Новичок Группы: Участники Зарегистрирован: 16.03.2023(UTC) Сообщений: 5 Откуда: г Санкт-Петербург	С косыми линиями получилось минус одна ошибка У меня их еще 4 судя по всемуСинхронные вызовы метода XMLHttpRequest в основном потоке больше не поддерживаются, так как они отрицательно влияют на удобство работы пользователей. Подробнее: https://xhr.spec.whatwg.org/ . 1 источник framework.js:1 Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform A page or script is accessing at least one of navigator.userAgent, navigator.appVersion, and navigator.platform. Starting in Chrome 101, the amount of information available in the User Agent string will be reduced. To fix this issue, replace the usage of navigator.userAgent, navigator.appVersion, and navigator.platform with feature detection, progressive enhancement, or migrate to navigator.userAgentData. Note that for performance reasons, only the first access to one of the properties is shown. 2 источника Подробнее: Сокращение строки агента пользователя Page layout may be unexpected due to Quirks Mode One or more documents in this page is in Quirks Mode, which will render the affected document(s) with quirks incompatible with the current HTML and CSS specifications. Quirks Mode exists mostly due to historical reasons. If this is not intentional, you can add or modify the DOCTYPE to be `<!DOCTYPE html>` to render the page in No Quirks Mode. 1 элемент Документ в дереве DOM Режим URL document Quirks Mode https://lkipgost2.nalog.ru/web/agreement?fullName=%D0%A1%D1%82%D0%B5%D1%84%D0%B0%D0%BD%D0%BE%D0%B2%D0%B0%20%D0%95%D0%BA%D0%B0%D1%82%D0%B5%D1%80%D0%B8%D0%BD%D0%B0%20%D0%98%D0%B3%D0%BE%D1%80%D0%B5%D0%B2%D0%BD%D0%B0 Подробнее: Режим совместимости с документом

Ras20066	#65 Оставлено : 17 марта 2023 г. 16:55:41(UTC)
Статус: Новичок Группы: Участники Зарегистрирован: 09.07.2011(UTC) Сообщений: 6 Откуда: 1 Сказал(а) «Спасибо»: 1 раз	Автор: nytux В общем это бомжи на разрабах. Это тупой и мизерный баг. . Храни тебя господь))) Это работает. Правда есть сложности когда файл не даёт сохранить, нужно его на комп сохранить и добавить эту папке в Overriders
	WWW

EkaterinaSt	#66 Оставлено : 17 марта 2023 г. 16:59:59(UTC)
Статус: Новичок Группы: Участники Зарегистрирован: 16.03.2023(UTC) Сообщений: 5 Откуда: г Санкт-Петербург	Получилось!! Удалила я эту штуку и все подписалось!

**iceberg**	#67 Оставлено : 17 марта 2023 г. 18:14:36(UTC)
Статус: Участник Группы: Участники Зарегистрирован: 15.03.2023(UTC) Сообщений: 17 Откуда: ДНР	Не помогает (

Slepoi73	#68 Оставлено : 17 марта 2023 г. 18:16:02(UTC)
Статус: Участник Группы: Участники Зарегистрирован: 16.03.2023(UTC) Сообщений: 11	nytux лучший мне помог а то уже неделю сидел плакал

nytux	#69 Оставлено : 17 марта 2023 г. 18:19:08(UTC)
Статус: Новичок Группы: Участники Зарегистрирован: 17.03.2023(UTC) Сообщений: 6 Откуда: Йошкар-Ола Поблагодарили: 3 раз в 1 постах	У кого не работает качайте anydesk и пишите в личку.

**iceberg**	#70 Оставлено : 17 марта 2023 г. 18:23:01(UTC)
Статус: Участник Группы: Участники Зарегистрирован: 15.03.2023(UTC) Сообщений: 17 Откуда: ДНР	ОПАААА Сервис временно недоступен Технологические работы. ЛК ИП ФНС

Быстрый переход
 

Вы не можете создавать новые темы в этом форуме.

Вы не можете отвечать в этом форуме.

Вы не можете удалять Ваши сообщения в этом форуме.

Вы не можете редактировать Ваши сообщения в этом форуме.

Вы не можете создавать опросы в этом форуме.

Вы не можете голосовать в этом форуме.

Hello fellow Zoomers,

I have a rather perplexing problem – when I am on Zooms meeting through my browser (Google Chrome), my cam is zoomed in to approx 120% but it is not of my doing. I checked all my settings and it’s all what it should be.  

Features of this Problem

– To be sure on where the problem is, I used another videoconf service on Chrome and the cam is as it should be, at 100%. So, the problem is not with the browser. Attached is a comparison between what my cam looks like on zoom vs other vconf service on the same browser taken at the same time. 

– Back on my Zoom meeting page, I looked at the console and an error was found – it says 

Page layout may be unexpected due to Quirks Mode
One or more documents in this page is in Quirks Mode, which will render the affected document(s) with quirks incompatible with the current HTML and CSS specifications.

Could this be the issue causing my cam to be zoomed in?

> If so, is it something I can fix? Or is it something Zoom has to fix?

> If not, what could be the issue and what can I do?

Any help would be much appreciated. I’ve been googling and trying all sorts of things for more than a week now to no avail. Thanks!

Tech  Specs

– Macbook Air 2018 on OS 12.5.1

– External USB Cam

– Google Chrome Browser (Version 105.0.5195.102 (Official Build) (x86_64))