css

2 posts with the tag “css”

Don't use display:none without serious reasons

May 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.

Tags:

• css
• browser
• bug

0 days without mistake with SVG background

Dec 20, 2024

TLDR

If you have SVG with defined width on it, for using as background you either need to set background-size: 100% 150px (second value is a height, put there what works for you) or background-size: auto 150px + background-repeat: repeat-x;

Codesandbox with examples how SVGs look with different css options.

We have a background SVG at the top of our website: it is SVG image on top, but the main part is just a gray background.

We use the following css for that:

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

It works fine, but holidays are coming and our designer suggested to use a more festive background (and of course add little snow, but there was no problem with snow). Additionally designer requested not to stretch holiday image, so I came up with the following css

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

It went to testing, then to production, and a couple of days after I have message from colleague: hey, could we do something with holiday background on wide screens? It was a disaster: on wide screens (more than 2500px) our background ends on 2000px and the rest is left as an empty gray space!

Fix is really simple:

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

Just note: 100% or repeat.

Tags:

• css
• SVG