Cambio de clase de elemento del cuerpo en Opera

Question

Tengo este script que básicamente cambia una clase bgColor de encendido y apagado de manera que el fondo cambia a negro en el primer clic de botón y después vuelve a la clase vacía por defecto en la segunda posición. Lo que estoy tratando de averiguar es por qué, en Opera 9.64, en la tercera clic del botón, el fondo permanece en negro y sólo el fondo alrededor del botón cambia de 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>

Gracias.

Answer 1

Parece que hay un problema de representación, porque cuando se cambia el tamaño de la Opera (obligándolo a volver a dibujar) entonces todo el fondo aparecerá en blanco como se esperaba.

Puede añadir algo como esto a su CSS para obligar a Opera en el pensamiento de que el cuerpo es de hecho el mismo tamaño que la ventana gráfica:

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