Problema con tabs

[Alexis88]

Hola amigos del foro, en esta ocasión, vengo a contarles sobre un raro problema que se ha suscitado en una aplicación web que elaboré para un cliente.

Según lo dicho por mi cliente y que pude constatar, los tabs o pestañas (como quieran llamarles) que están en una sección de la aplicación, se apilan y desapilan sin motivo alguno (se superponen y luego vuelven a su lugar), lo extraño es que esto ocurre por ratos, es decir, en la mañana está utilizando la aplicación sin problemas y transcurren minutos u horas y vuelve a presentarse el desperfecto, el cual se 'arregla' de la misma manera en que se 'desarregló', es decir, de manera espontánea.

Debo de aclarar que la superposición de las pestañas se presenta cuando se ingresa al módulo en el que se encuentran, no durante el proceso de ingreso de datos que es para lo que fue hecho. Sin embargo, hay ocasiones en las que mi cliente ingresa al módulo y encuentra las pestañas en su lugar y en otro momento, vuelve a ingresar al mismo módulo y las pestañas están superpuestas.

Nunca me había ocurrido algo así, pasé varios días probando la aplicación, revisé varias veces el código fuente (lo hice todo desde cero) y no encontré error alguno que pudiera generar esta falla.

La estructura de las pestañas es la siguiente:

Código HTML:

<section id = "tabs">
    <div class = "tab">
        <input type = "radio" name = "opcion" id = "opcion1" checked />
        <label class = "opcion" for = "opcion1">Opción 1</label>
        <div class = "contenido">
            Contenido 1
        </div>
    </div>
 
    <div class = "tab">
        <input type = "radio" name = "opcion" id = "opcion2" />
        <label class = "opcion" for = "opcion2">Opción 2</label>
        <div class = "contenido">
            Contenido 2
        </div>
    </div>
 
    <div class = "tab">
        <input type = "radio" name = "opcion" id = "opcion3" />
        <label class = "opcion" for = "opcion3">Opción 3</label>
        <div class = "contenido">
            Contenido 3
        </div>
    </div>
</section>
 

Código CSS:

#tabs{
    position: relative;
    left: 50%;
    margin-left: -50%;
    margin-top: 3.5%;
    width: 45em;
    border-radius: 0 .4em 0 0;
}
 
#tabs .contenido{
    position: absolute;
    border-radius: 0 .4em .4em .4em;
    width: 45em;
    height: 22.5em;
    transition: .45s;
    background: lightcyan;
    opacity: 0;
}
 
#tabs .tab [type="radio"]{
    display: none;
}
 
#tabs .tab .opcion{
    float: left;
    margin-right: .25em;
    margin-top: -1.325em;
    cursor: pointer;
    background: darkcyan;
    border-radius: .4em .4em 0 0;
    border: .1em lightcyan solid;
    color: whitesmoke;
    z-index: 2000;
}
 
#tabs .tab .opcion:hover, #tabs .tab [type="radio"]:checked ~ .opcion{
    background: lightcyan;
    color: darkcyan;
}
 
#tabs .tab [type="radio"]:checked ~ .contenido{
    opacity: 1;
    z-index: 1000;
}
 

He revisado y probado el código que muestro una y otra vez y en ningún momento me sucedió lo que le pasó a mi cliente. Lo extraño del caso es que sucede de manera espontánea, tanto el arreglo como el desarreglo.

Mi cliente utiliza la última versión de Google Chrome como navegador en una portátil con Windows 8.1, no sé (y no creo) que el S.O. influya en el problema que expongo, pero en fin, quizá alguno de ustedes encuentre el desperfecto que no logro ver.

Saludos

[alzacon]

La situación es más compleja de lo que pueda parecer al principio. El código que muestras dices que no reproduce el problema, este código es estático y en la aplicación algo lo forzara a comportarse de manera distinta. ¿Sólo ocurre con un navegador o con todos? Se me ocurren muchas preguntas más, pero creo que se avanzaría más si inspeccionas la aplicación en vivo (con firebug o el inspector del navegador).

Lo siento pero no te puedo dar otra "solución", porque desconozco el funcionamiento del módulo problemático, así como este código estático puede variar dentro del mismo (y no hablo sólo del div.contenido).

[Alexis88]

Claro, es estático porque las pestañas solo distribuyen los distintos campos de texto que cada bloque contiene. Se trata de un formulario con varios campos de ingreso de datos, distribuidos en contenedores. No se generan mensajes de error o alertas en consola pues CSS no produce ese tipo de comportamiento. El problema definitivamente no está en el lado del servidor, ya que ahí solo proceso y guardo información, esto corresponde a la capa de presentación y nada más que HTML y CSS están involucrados, pues como verás, esto está basado en CSS, ni siquiera tengo necesidad de utilizar JS para su normal funcionamiento.

La única diferencia entre este ejemplo y lo que implementé en la aplicación de mi cliente, es que en esta última hay cajas y áreas de texto, el resto es igual. Es más, cuando acudí al llamado de mi cliente para solucionar el impasse, verifiqué el código en consola línea por línea mientras ejecutaba la aplicación y todo estaba en perfecto estado, tal y como lo puedes ver en el ejemplo que mostré.

De verdad que esto me parece algo muy raro, pues incluso borrando la caché del navegador, creyendo que se pudiera haber almacenado una copia de un mal diseño, persiste el problema que como repito, se presenta de un momento a otro, mi cliente está usando sin problemas la aplicación y 2, 3, 4 horas más tarde o incluso al día siguiente, vuelve a presentarse el problema.

Lo más raro de esto es que antes de entregar la aplicación e incluso hoy mismo, he seguido haciendo pruebas y en ningún momento he tenido dicho inconveniente. Las pruebas consisten en ingresar datos al formulario y guardarlos, eso es todo pues es la única funcionalidad de dicho módulo.

Saludos

[alzacon]

No me has entendido bien. Tu aplicación aún funcionando bien puede modificar el html o el css, no sé como funciona la aplicación, pero por eso se me plantean dudas: el título de las pestañas cambia o es el mismo siempre, o si puede que el contenedor donte está es del div.tabs tiene siempre las medidas, etc. Por eso, digo que inspecciones el código. La consola no te sirve para nada como tu mismo dices. Mira las reglas css: se te mantienen o si hay algo que las sobreescribe o si los valores computados son los que deberían.

Tampoco has concretado si ocurre en otros navegadores o no. Yo no puedo ver el comportamiento de la aplicación, pero tú puedes comparar dos capturas de pantalla: con el fallo y sin éste, porque a lo mejor encuentras la razón ahí.

[Alexis88]

Hombre, te digo que la estructura es la misma y que los procesos que en ella se ejecutan, no la afectan en lo absoluto. Las medidas son las mismas que especifiqué, nunca cambian ni cuando se han ingresado datos ni cuando todavía no han sido ingresados. Como vuelvo a repetir, los contenedores contienen campos de ingreso de texto (input, textarea), los cuales jamás varían en sus medidas ni cuando tienen datos ni cuando no los tienen, tampoco varían los elementos de título ni las etiquetas de referencia, SIEMPRE son los mismos.

No ha sido posible probar en otros navegadores porque la empresa en donde labora mi cliente no lo deja instalar otro navegador que el que ellos le asignan, son políticas internas que ellos tienen y contra las que no puedo hacer nada. Lo más complicado de esto es que no es posible saber en qué momento se desarreglará la estructura, es decir, yo puedo ir ahora mismo y ver la aplicación bien, pero a las 5 horas o después de 2 días, mi cliente me llama y me dice que nuevamente se presentó el problema, y si voy (como ya lo hice cuando pasó esto la primera vez), reviso el código en vivo (en el navegador, obviamente) y no noto nada fuera de lo normal. Lo más curioso del caso es que solo a mi cliente le sucede esto, cosa que no pasa cuando pruebo la aplicación en mi computadora, a pesar de que utilizamos la misma versión de Chrome, aunque yo lo hago desde una computadora de escritorio con WinXP y ella desde una laptop con Win8.1, pero creo que si fuera un problema de resolución y medidas, el problema sería permanente y no de manera esporádica.

Voy a seguir haciendo pruebas e inspeccionando el código en vivo, aunque muy probablemente obtenga los mismos resultados, pero quién sabe, quizá en uno de esos intentos logro hallar el desperfecto.

Saludos

[pzin]

Buenas Alexis.

A mi me pasa un poco como a alzacon, me veo un poco como fuera de contexto al ver tu problema. He hecho alguna prueba con tu código pero no veo realmente el problema.

Hay código que no entiendo el porqué, pero supongo que será la falta de ese contexto.

De todas formas en la prueba parece que siempre se superponen las pestañas ¿no? Debe de ser por el flotado de label.opcion en la linea #25. Ahí no le veo mucho sentido que esté flotado, pero claro, igual en contexto si tiene sentido.

Si le quitas el checked al primer input y luego añades/eliminas el flotado que te digo verás que el problema aparece y desaparece.

[Alexis88]

Haciendo pruebas con la hoja de estilos, noté que si le doy un margin-right de -3.25em a las pestañas, estas quedan casi como cuando surge el problema, con la diferencia de que en el problema, en lugar de ser la última pestaña la que queda en la superficie, es la primera.

Ahora me pregunto, ¿qué podría causar este comportamiento? Como mencioné en una de mis respuestas, la única diferencia entre este ejemplo y lo que implementé en la aplicación es que en cada contenedor hay cajas y áreas de texto, las cuales tampoco varían su tamaño, tengan o no contenido. Debo mencionar que este esquema se encuentra en dos archivos, en el del ingreso de datos y en el de edición, siendo ambos idénticos en estructura, con la diferencia de que en el de edición realizo una consulta a la BD para cargar los datos previamente ingresados en las cajas y áreas de texto. Es en este módulo (el de edición) en el que se presenta el desperfecto, pero sigo contrariado porque si fuera la carga de datos la que afectara al diseño, entonces no ocurrirían esos arreglos mágicos del mismo, siempre estaría desarreglado y eso no sucede. Y antes de que me lo pregunten, revisé el código CSS en ejecución y todos los valores seguían siendo los mismos que al inicio.

Saludos