Problem with width of text label

I’m using OpenLayers v6.1.1 and for some reason, from time to time, after a few refreshes of the page, the background of the text label gets the wrong height. It should look like this: but finally, it will become: which is wrong.

Here is a piece of code I’m using to generate this style:

style = new ol.style.Style({
	image: new ol.style.Icon({
		anchor: [0.5, 46],
		anchorXUnits: 'fraction',
		anchorYUnits: 'pixels',
		src: icon
	}),
});
if (SOME_CONDITION) {
	style.setText(new ol.style.Text({
		font: 'bold 11px Arial, Helvetica, sans-serif',
		fill : new ol.style.Fill({
			color : 'white',
		}),
		backgroundFill: new ol.style.Fill({
			color : highlighted ? 'rgba(250, 44, 47, 0.8)' : 'rgba(119, 118, 115, 0.8)'
		}),
		padding: [2, 2, 2, 2],
		text: name,
		offsetY: -5
	}));
}

layer = new ol.layer.Vector({
    source: my_source
    style: getFeatureStyle() //above code is used insode of this function to set the style for all features on this layer
});

Is this a bug or I’m doing something wrong?

[ahocevar]

@dawidr I just updated the master build, so you can now get the latest from https://openlayers.org/en/master/build/ol.js (js) and https://openlayers.org/en/master/css/ol.css (css).

[Doskii]

@dawidr Ok, so after some more headbanging against my desk I’ve noticed that if I remove my display: flex from the body element it fixes the problem (but breaks my site of-course). However if I put a div just below the body and give it flex the problem is gone. It seem to have something to do with body having flex. I don’t understand why this would be a problem but oh well. I’ve reported it as a new issue #12213, though I don’t know if this issue is related to yours or not as you mentioned it only happening sometimes 🤔

In my case I can’t just change the structure of the website whenever I feel like so I’ll try to figure out another way. If you’re interested this is basically what happened for me: https://jsfiddle.net/Doskii/29hxu4bd/