По тропе граблей IE и Edge

Подводя итоги одного из проектов собрал грабли, в которые угодил.
Что бы не допустить такого в будущем собрал их в одном списке, который буду перечитывать позже перед началом новых проектов.. а впрочем, и во время.
Хочется верить, что это войдет в привычку и хочу порекомендовать её вам - подведение итогов, резюмирование новых знаний должны повысить эффективность и общее самомнение :)

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

Ожидаемо начнем с не очень популярных «браузеров» - IE 11, Edge. Казалось бы современные версии браузеров, а вставляют палки в колеса.

IE, Edge не поддерживают pointer-events: none;
IE, Edge не работают с window.scrollY, нужно использовать window.pageYOffset
IE, Edge не поддерживают offset-outline - надо пилить :before, :after
IE, Edge. Проверять цвет для placeholder
Сайт нужно отдельно проверять на 1024, отдельно в браузерах и IE

Что тут можно добавить:

Если использование pointer-events критично, то его функциональность нужно дублировать для IE, Edge скриптами - они этого свойства не знают.

Тоже касается offset-outline - очень удобное свойство для некоторых задач, но из-за особенностей IE, Edge эти вещи нужно делать через :before, :after. Особую сложность это доставляет, если :before, :after уже заняты, так что приходится порождать вложенные блоки, что в целом ухудшает семантику.

Насчет 1024px уже не вспомню в чем было дело, но как-то криво Edge работал с float:left + display:inline-block;

Продолжение следует!
Следующий пост о пограничных состояниях в интерфейсах и замаскированных граблях ожидается 17 ноября.