Estoy usando la siguiente secuencia de comandos para hacer mi web app ir a pantalla completa…

function enterFullscreen(){
    var element = document.getElementById('container');
    if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }
    l('Fullscreen Mode entered','internal');
}

Y así, cuando hago clic en el botón de disparo a través de $('button.toggle-fullscreen').click(function(){ enterFullscreen(); }); yo, de hecho, entrar en pantalla completa, sólo mi elemento se vuelve negro. Negro, nada más.

Alguien sabe como solucionar esto?

FYI estoy usando Chrome 27.

OriginalEl autor Jody Heavener | 2013-04-23

5 Comentarios

  1. 15

    El color de fondo por defecto del navegador de pantalla completa «entorno visual» es de color negro. Su contenido en realidad hay, pero actualmente se encuentra el texto negro sobre fondo negro, por lo que no se puede ver (tratar de destacar o pulsando Ctrl+A para ver por sí mismo).

    Si quieres hacer el fondo de un color diferente, debe especificar una regla CSS para definir el background-color propiedad de algo que no sea el predeterminado. Así que, en su caso:

    #container:fullscreen {
        background-color: rgba(255,255,255,0);
    }
    #container:-webkit-full-screen {
        background-color: rgba(255,255,255,0);
    }
    #container:-moz-full-screen {
        background-color: rgba(255,255,255,0);
    }

    debe hacer el truco. (Asegúrese de utilizar el proveedor correspondiente versión(s) — :-webkit-full-screen y :-moz-full-screen — hasta que la especificación finaliza; ver MDN para obtener más información.)

    De hecho, tal vez sólo

    *:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
        background-color: rgba(255,255,255,0);
    }

    EDICIÓN por @DevilishDB:
    utiliza rgba transparentes, BG y se añade el * selector para hacer lo anterior trabajo

    Mi contenedor está siendo utilizado sólo como un elemento estructural para mantener todo (sin estilos visuales), y requiere de un fondo transparente. Sería yo capaz de establecer background-color: transparent?
    Usted puede utilizar el :fullscreen pseudo-clase. Voy a editar mi respuesta.
    todavía no hay suerte! He intentado reproducir lo que está sucediendo en jsFiddle pero no me deja tomar la app a pantalla completa por desgracia. Desde el container div es esencialmente la totalidad de la página he intentado cambiar el selector a la <body> etiqueta para ver si se podía hacer una diferencia, pero todavía me parece que no puede conseguir a no ser negro. No puedo ni siquiera parecen encontrar donde el negro está siendo aplicado en el DOM inspector. Otras sugerencias?
    El violín no van a ir a pantalla completa porque iframe contenido no está permitido iniciar a pantalla completa sin necesidad de encabezados HTTP. Sin embargo, usted puede ver su violín como una página independiente yendo a http://fiddle.jshell.net/[ID]/[versionNum]/show/ (p. ej., fiddle.jshell.net/gtCSs/1/show) — o, simplemente, utilizar su navegador, haga clic en el menú «Abrir marco en una nueva pestaña» o similar.
    En mi reciente proyecto, se tomó 1 paso adicional en webkit. Yo era la aplicación de pantalla completa para el elemento de cuerpo, y que yo necesitaba para establecer la altura y el ancho al 100%, de modo que cubrió la pantalla y cubierto el negro por defecto: cuerpo:-webkit-full-screen { background-color: rgba(255,255,255,0); width:100%; height:100%; }

    OriginalEl autor apsillers

  2. 12

    No sé la respuesta exacta a tu pregunta, pero esta información podría ayudar a:

    Tuve un similar problema de fondo negro con enterFullscreen(document.body);. El color de fondo se convirtió en normal después de que he cambiado la línea de enterFullscreen(document.documentElement);.
    El css que utiliza es body{background-color: #D7D7D7; margin: 0px;}.

    Para info, acabo de hacer este ajuste en la reveal.js y esto se ha corregido un problema por el que la presentación de los fondos iban negro en modo de pantalla completa en Chrome sólo
    No tengo ningún motivo por el que Chrome sigue haciendo esto con el documento.cuerpo, pero a mí me funcionó demasiado con el documento.documentElement. Chrome, no se convirtió en negro si se pulsa F11 (pantalla completa por menú), pero sólo con JavaScript documento.el cuerpo será negro. Incluso si :fullscreen órgano transparente.

    OriginalEl autor feilong

  3. 9

    No sé por qué, pero parece que el fondo del cuerpo es el elemento no se muestra en pantalla completa o se vuelven transparentes…

    He arreglado esto mediante el establecimiento de un color de fondo para el elemento html, y funciona muy bien:

    html {
        background-color: #ffffff;
        /* Or any color /image you want */
    }
    El aceptó responder funciona, pero lo hace este. Me encantaría saber por qué (parece webkit específicos) …

    OriginalEl autor Miaow

  4. 2

    la principal solución no funciona para mí 🙁 he encontrado otra solución, pero sí, en el css:

    :-webkit-full-screen, :fullscreen, :-ms-fullscreen, :-moz-full-screen {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0; 
    background: none;}

    Entiendo que esto es por la posición de los elementos, pero yo no. Espero ayudar a alguien. Adiós y gracias.

    OriginalEl autor Drako

  5. 2

    Ninguna de las otras respuestas es trabajo para mí (Chrome 70 o FF 63)

    Agregar esto al archivo CSS funciona

    ::backdrop
    {
        background-color: white;
    }
    Gracias, esa es la pseudo yo estaba buscando

    OriginalEl autor flappix

Dejar respuesta

Please enter your comment!
Please enter your name here