Приведи пример бага, который возникает в каком-то конкретном браузере

Пример бага специфичного для браузера: рендеринг CSS aspect-ratio в Safari

Один из ярких и современных примеров кросс-браузерного бага связан с поддержкой CSS свойства aspect-ratio. Этот баг проявляется именно в браузере Safari (особенно в версиях до 15.4) и связан с некорректным вычислением размеров элемента, когда используются определенные комбинации свойств.

Суть бага

Свойство aspect-ratio позволяет легко задать соотношение ширины и высоты элемента. Например, aspect-ratio: 16 / 9; автоматически вычисляет высоту относительно ширины. В Chrome, Firefox и других браузерах на основе Chromium это работает корректно в большинстве случаев. Однако в Safari при совместном использовании aspect-ratio с min-width или max-width может возникать непредсказуемое поведение: высота элемента рассчитывается неверно, либо элемент вообще не отображается.

Конкретный пример кода и результат

Рассмотрим простой блок с фиксированным соотношением сторон и минимальной шириной.

/* CSS для элемента с aspect-ratio */
.media-block {
    aspect-ratio: 16 / 9;
    min-width: 300px;
    background-color: steelblue;
}

<!-- HTML элемент -->
<div class="media-block">
    Этот блок должен иметь соотношение сторон 16:9 и минимальную ширину 300px.
</div>

Ожидаемое поведение (Chrome/Firefox):

• Блок принимает ширину либо от родителя, либо min-width: 300px.
• Высота автоматически рассчитывается как ширина / (16/9). Например, при ширине 300px высота будет примерно 169px.
• Блок отображается корректно.

Фактическое поведение в Safari (версия < 15.4):

• Высота может быть рассчитана как 0, что приводит к полному исчезновению видимого блока (если не задана фоновая картинка или цвет).
• Или высота может быть вычислена относительно некорректной базовой ширины, нарушая пропорцию 16:9.
• Элемент становится невидимым или его размеры "ломают" верстку.

Почему это происходит и как обнаружить

Это баг связан с исторической проблемой Safari в реализации новых стандартов CSS. Safari часто отстает в поддержке некоторых частей спецификаций, особенно связанных с сложными вычислениями размеров. В данном случае, механизм разрешения конфликтов между aspect-ratio и ограничивающими свойствами (min/max-width/height) был реализован неполноценно.

Как можно обнаружить такой баг во время тестирования:

• План тестирования кросс-браузерности: Включить Safari (особенно на macOS и iOS) как обязательный браузер для проверки верстки.
• Использование инструментов: Проверка в браузерах Safari разных версий через сервисы типа BrowserStack или Sauce Labs.
• Визуальная проверка: Прямое сравнение отображения страницы в Safari и Chrome/Firefox на ключевых страницах, содержащих медиа-блоки, карточки продуктов, галереи.
• Автоматизация: Написание скриптов или использование фреймворков (например, Selenium), которые могут захватывать размеры элементов и сравнивать их между браузерами.

Временное решение (workaround) до полного исправления

Пока баг не исправлен (или для поддержки старых версий Safari), разработчики используют альтернативные методы задания пропорций.

/* Workaround: Использование старых техник вместо aspect-ratio */
.media-block {
    /* Убираем aspect-ratio для Safari */
    min-width: 300px;
    background-color: steelblue;
}

/* Используем абсолютное позиционирование внутреннего контейнера или padding hack */
.media-block__inner {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 9 / 16 * 100% = 56.25% для соотношения 16:9 */
    position: relative;
}

Альтернатива: Использование JavaScript для вычисления и установки высоты вручную при обнаружении браузера Safari.

Важность подобных багов для QA Engineer

• Понимание экосистемы: Такие баги подчеркивают, что веб — это не единая платформа, а набор различных реализаций стандартов. QA Engineer должен знать типичные "больные места" каждого браузера.
• Приоритизация: Баги, влияющие на ключевой пользовательский интерфейс (например, исчезновение кнопок или изображений) в популярном браузере (Safari на iOS), имеют высший приоритет.
• Коммуникация с разработчиками: Грамотный QA не просто сообщает "в Safari не работает", но предоставляет детали: версия браузера, конкретные условия воспроизведения, примеры кода и возможные известные workaround. Это значительно ускоряет процесс исправления.

Таким образом, баг с aspect-ratio в Safari — это отличный пример того, как глубокое знание особенностей браузеров и современных стандартов веб-разработки позволяет QA Engineer эффективно выявлять, описывать и помогать решать проблемы, напрямую влияющие на пользовательский опыт.