fix(tradein): фото аналога в Сводке больше не скрыто плейсхолдером #423

Merged

lekss361 merged 1 commit from fix/tradein-hero-photo-visible into main

2026-05-22 10:35:44 +00:00

lekss361 commented

2026-05-22 10:35:29 +00:00

Owner

Проблема

В «Сводке» (HeroSummary) фото квартиры-аналога всегда показывалось как
серый плейсхолдер, хотя реальная картинка с CDN загружалась успешно.
Это тот самый «серый квадрат» из ранних скриншотов.

Причина

.hero-photo::before / ::after рисуют декоративный скелет «фасада
дома». Псевдоэлементы position:absolute, а <img> фото —
position:static. По правилам отрисовки абсолютные псевдоэлементы
рисуются поверх обычного in-flow содержимого → скелет перекрывал фото.
Подтверждено в DevTools: naturalWidth картинки 579×432 (загрузилась),
но elementFromPoint в центре возвращал .hero-photo, не <img>.

Решение

.hero-photo img → position:relative; z-index:1 (над скелетом)
.hero-photo .photo-meta → z-index:2 (подпись над фото)

Скелет-плейсхолдер остаётся виден, когда фото нет или оно не
загрузилось (onError ставит display:none).

Найдено в ходе визуального прогона UI на проде.

## Проблема В «Сводке» (HeroSummary) фото квартиры-аналога всегда показывалось как серый плейсхолдер, хотя реальная картинка с CDN загружалась успешно. Это тот самый «серый квадрат» из ранних скриншотов. ## Причина `.hero-photo::before` / `::after` рисуют декоративный скелет «фасада дома». Псевдоэлементы `position:absolute`, а `<img>` фото — `position:static`. По правилам отрисовки абсолютные псевдоэлементы рисуются поверх обычного in-flow содержимого → скелет перекрывал фото. Подтверждено в DevTools: `naturalWidth` картинки 579×432 (загрузилась), но `elementFromPoint` в центре возвращал `.hero-photo`, не `<img>`. ## Решение - `.hero-photo img` → `position:relative; z-index:1` (над скелетом) - `.hero-photo .photo-meta` → `z-index:2` (подпись над фото) Скелет-плейсхолдер остаётся виден, когда фото нет или оно не загрузилось (`onError` ставит `display:none`). Найдено в ходе визуального прогона UI на проде.

lekss361 added 1 commit 2026-05-22 10:35:30 +00:00

fix(tradein): фото аналога в Сводке больше не скрыто плейсхолдером 6041ac8464

В .hero-photo псевдоэлементы ::before/::after рисуют декоративный
скелет-плейсхолдер «фасада дома». Они position:absolute, а <img> с
фото аналога — position:static, поэтому абсолютные псевдоэлементы
рисовались ПОВЕРХ картинки: реальное фото загружалось (naturalWidth
есть), но визуально всегда был серый плейсхолдер.

Фото (z-index 1) и подпись .photo-meta (z-index 2) теперь над
скелетом. Скелет остаётся виден, когда фото нет или оно не
загрузилось (onError → display:none).