> Какой опыт есть с особенностями браузеров (JavaScript)

Короткий ответ

У меня есть опыт работы с кросс-браузерными особенностями, включая различия в CSS-свойствах (flexbox, grid), JavaScript API (fetch, localStorage), обработке событий (touch vs mouse) и рендеринге (WebGL, Canvas). Использую полифиллы, autoprefixer, feature detection и тестирование в реальных браузерах (Chrome, Firefox, Safari, Edge). Также сталкивался с багами в Safari (например, с sticky positioning, Date parsing) и IE11 (Promise, Array.from).

Подробное объяснение

Основные категории браузерных особенностей: парсинг HTML/CSS, реализация JavaScript-движков (V8, SpiderMonkey, JavaScriptCore), поддержка API (WebRTC, Service Workers, Intersection Observer), поведение событий (bubbling, passive listeners), рендеринг (repaint, reflow, compositing). Для Safari характерны проблемы с position: sticky в таблицах, 100vh с учетом адресной строки, Date в формате ISO. Chrome быстрее обновляется, но имеет баги с transform: scale и overflow: hidden. Firefox более строг к стандартам (например, :focus-visible). Для IE11 нужны полифиллы для Promise, fetch, Array.from, Object.assign. Решения: использовать @supports, Modernizr, caniuse.com, Babel, PostCSS.

На практике

В проекте с поддержкой IE11 использовал core-js для полифиллов, whatwg-fetch для fetch, classlist-polyfill. Для Safari на iOS применял -webkit-overflow-scrolling: touch и position: sticky с top: 0 и z-index. Для Chrome на Android исправлял баг с touch-action: manipulation для устранения задержки 300ms. В работе с Canvas учитывал разницу в devicePixelRatio (Safari игнорирует context.scale). Для WebGL проверял поддержку через canvas.getContext('webgl') и fallback на canvas.getContext('2d'). Использовал ResizeObserver вместо window.resize для точного отслеживания размеров.

Пример кода

JAVASCRIPT
// Feature detection для IntersectionObserver с fallback
if ('IntersectionObserver' in window) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        loadImage(entry.target);
        observer.unobserve(entry.target);
      }
    });
  }, { rootMargin: '200px' });
  document.querySelectorAll('.lazy').forEach(img => observer.observe(img));
} else {
  // Fallback для IE11 и старых Safari
  document.querySelectorAll('.lazy').forEach(img => {
    loadImage(img);
  });
}

function loadImage(img) {
  img.src = img.dataset.src;
}

Как отвечать на собеседовании

Начни с конкретных примеров из опыта: "В проекте X столкнулся с проблемой Y в Safari, решил через Z". Покажи понимание причин (разные движки, версии, платформы). Упомяни инструменты: caniuse.com, browserstack, polyfill.io. Подчеркни подход: feature detection вместо browser sniffing, progressive enhancement, graceful degradation. Если спросят про IE11 - покажи знание полифиллов и ограничений. Избегай общих фраз вроде "все браузеры разные".

Что проверяет интервьюер

• Практический опыт с реальными багами и их решениями
• Понимание различий в JavaScript-движках и CSS-спецификациях
• Умение выбирать между полифиллами, fallback и graceful degradation
• Знание современных инструментов (Babel, PostCSS, Modernizr)
• Способность объяснить причины различий (версии, платформы, стандарты)

Типичные ошибки

• Использование browser sniffing (navigator.userAgent) вместо feature detection
• Игнорирование Safari на iOS (отличается от Safari на macOS)
• Забывание про -webkit- префиксы для старых версий
• Применение полифиллов без проверки производительности
• Отсутствие тестирования на реальных устройствах (эмуляторы не всегда точны)
• Утверждение, что "Chrome - это стандарт" (Safari и Firefox имеют свои особенности)