Changing body element class in Opera

Question

I have this script which basically toggles a bgColor class on and off so that the background changes to black on the first button click and then returns to the default empty class on the second click. What I'm trying to figure out is why, in Opera 9.64, on the 3rd click of the button, the background stays black and only the background around the button changes color.

<style>
.bgColor {background-color: #000000}
</style>

<button id="button">Change Class</button>

<script>
function changeBodyClass() {
    var body = document.body;
    if (body.className === "bgColor") {
        body.className = "";
    } else {
        body.className = "bgColor";
    }
}

document.getElementById("button").onclick = changeBodyClass;
</script>

Thanks.

Answer 1

There seems to be a rendering issue, because when you resize Opera (forcing it to redraw) then all the background will appear in white as expected.

You can add something like this to your CSS to force Opera into thinking that body is indeed the same size as viewport:

html {margin: 0; height: 100%}
body {margin: 0; height: 100%}