Element added to the DOM but it is not visible

Question

        console.log("hello");
        chrome.storage.sync.get(['key'], function(data) {
            // do something with data
        });


        setTimeout(() => {
            let holder = document.getElementById("player-container").querySelector("#container").querySelector("#movie_player"); // get a reference to this element
            console.log(holder.offsetHeight);
            // add a button to the screen
            let activateButton = document.createElement("div");
            activateButton.id = "activate-ext";
            activateButton.addEventListener("click", displayUI);
            holder.appendChild(activateButton);
        }, 5 * 1000);

This is all the code I have in my extension's content script.

So, I am using setTimeout to wait for a min of 5 seconds(for the webpage to load) and then I query for document.getElementById("player-container").querySelector("#container").querySelector("#movie_player") element.

Most of the time it is working as expected. The webpage loads and then the UI is added to the DOM and is visible(of course after 5 seconds or so).

But every once in a while, I am seeing this odd behaviour.

1. I get a reference to the element I am querying for. I store that inside the holder variable.
2. the height is logged to the console 3)UI element gets created
3. and it is added to the DOM. but for some reason, the element is not visible.

I can see the element in the code but it is not rendered on the screen.

When I checked, for some reason the injected CSS was not applied to the element.

manifest.json(content_scripts part)

"content_scripts": [{
        "matches": [
            "*://www.youtube.com/watch?*"
        ],
        "js": [
            "content.js"
        ],
        "css": ["style.css"],
        "run_at": "document_end"
    }]

Why is this happening?