Boxes around text for annotation labels only appear after the chart is clicked

[mouxdev]

Description

The colored boxes used as a backdrop for annotations do not show up at all. There is a specific setup where you can get them to show up after clicking the chart once

Steps to Reproduce

1. Create a basic chart with this setup:

   
   var options = {
   chart: {
       type: 'line',
       height: 600,
       width: 900
   },
   series: [{
       name: 'sales',
       data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
   }],
   xaxis: {
       categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
   },
   annotations: {
       xaxis: [
           {
               x: 1994,
               strokeDashArray: 0, borderColor: "#775DD0",
               label: {
                   borderColor: "#775DD0",
                   position: "bottom",
                   style: { color: "#fff", background: "#775DD0", },
                   text: "Anno",
               }
           }
       ],
   }
   }

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

2. Look at it and notice the missing annotation text box (if you look closely, you will see that the text renders - it's just the backgroudn box that is missing)
3. Add `toolbar: { autoSelected: "pan" }` to `options.chart`
4. Look at the chart again. The textbox will still be missing.
5. Click the chart once. The missing text box will appear

### Expected Behavior
The box behind the text should render in all circumstances initially and not be hidden or spawnable via clicking

### Actual Behavior
The box is not showing up at all and there is a specific setup to get it to appear.

### Screenshots
The annotation with the missing text box
<img width="900" alt="Bildschirmfoto 2024-06-12 um 13 33 05" src="https://github.com/apexcharts/apexcharts.js/assets/59286548/96e3cf09-0733-4065-8bc1-60ca769a8ca9">

### Reproduction Link
https://codepen.io/moux369/pen/KKLXLrx

[brianlagunas]

Which browser are you using because this works in both Edge and Chrome.

[mouxdev]

i am using firefox 126.0.1 on macOS 13.6.3

[mouxdev]

i didnt even think that it could be an issue with the browser, but now that you suggested it, i tried it out in safari, chrome and opera and it works fine there. firefox still no luck.

[rosco54]

It's looking like it's a Firefox issue:

Firefox 127 on Windows 10

Firefox 110 on Windows 10

In Firefox 127, if I open the inspector panel and click drag even slightly to resize the panel the X-axis label is drawn. It appears to be something to do with the way Firefox renders, not JS etc. Perhaps a lost event?

In fact, it affects all annotation types and the labels appear if the Firefox window is resized in any way, with or without the inspector panel.

Initial load

After adjustment of Firefox window vertical size