css | 🐰 Svetlana Zaiats

Don't use display:none without serious reasons

23 мая 2025 г.

Two days before release — and guess what? Suddenly, all popovers with information about meeting rooms in our app broke and stopped displaying. We hadn’t even changed anything related to this functionality — how could this happen?

Situation

It turned out that the popovers were broken in all browsers except Chrome. And after the latest Chrome update, they stopped working there too.

What happened?

Four years ago, someone decided it was fine to hide a <g> element using display: none, but still call node.getBoundingClientRect() on its child elements to calculate the popover’s position.

It worked… until it didn’t. Now, all modern browsers correctly return zero for the coordinates and size of any child inside a display: none element.

To be honest, I didn’t want to refactor much, so I replaced display: none with opacity: 0. In this case, the element is still invisible to the user but remains in the document flow and keeps its size.

0 дней без ошибок с SVG background

20 дек. 2024 г.

У нас SVG в качестве фона сверху нашего сайта, основной фон — просто серый. Для картинки у нас такой css:

.container {
    background-image: url(path/to/our.svg);
    background-repeat: no-repeat;
    background-size: 100% 144px;
}

Всех всё устраивает, однако подкрались праздники и дизайнерка предложила обновить картинку на более праздничную (и, конечно, добавить снег, но с ним как раз проблем не было). Дизайнерка попросила не растягивать новую картинку (как мы делаем обычно, просто растягивая её до 100%), так что обновила css:

.container {
    background-image: url(path/to/holiday.svg);
    background: no-repeat;
    background-size: auto 144px;
    background-position: left top;
}

Тестировщики протестировали, и всё улетело в предпраздничный релиз.

Пару дней спустя мне написал коллега: можем ли мы что-то сделать с нашим праздничным фоном на широких экранах? Я проверила, и это была катастрофа: на широких экранах (более чем 2500px) наш фон заканчивался на 2000px, и дальше справа было просто серое пятно.

Фикс был быстрый и простой:

.container {
    background-image: url(path/to/holiday.svg);
    background: repeat-x;
    background-size: auto 144px;
    background-position: left top;
}

Просто не забывайте: либо 100%, либо repeat.