Firefox y CSS3: utilizando overflow: hidden y box-shadow

No estoy seguro de si este error se aplica solo a Firefox o también a los navegadores basados en WebKit, pero es realmente, realmente molesto.Firefox y CSS3: utilizando overflow: hidden y box-shadow

Tengo una plantilla/marco para mi interfaz CMS, usando box-shadow en algunos elementos con un ancho del 100%. Como esto causa sombra en el lado derecho del elemento, aparece una barra de desplazamiento. Para ocultar la fea barra de desplazamiento, configuro "desbordamiento: oculto" en el elemento del cuerpo y en el div wrapper.

Esto provoca un comportamiento extraño. Aunque no hay barras de desplazamiento, la página aún se desplaza hacia la derecha cuando me desplazo con mi panel táctil (desplazamiento horizontal). Lo intenté muchísimo y me desconecté en Google, pero parece que no puedo encontrar una solución para esto ...

¿Alguien sabe solucionar un problema? ¿o es solo un ejemplo de implementación conflictiva de css3 box-shadow?

Fuente

2010-02-26 Fabdrol

Otto: el enlace está roto. –

Gah, no quise remontar el enlace roto de Otto. – lemonad

Primero, tenga cuidado cuando señale a alguien más como la causa de sus problemas. Piensa para ti mismo cuál es más probable, que el problema está en la pieza de código utilizada por 200 mil usuarios y 20 mil desarrolladores diariamente, o que está en la cosa que usaste, durante 4 horas.

Dicho esto, su siguiente paso debe ser reducir esto a una página de prueba simple que contenga solo el HTML suficiente para demostrar el comportamiento. En su caso, eso sería una página como esta:

<html> 
    <body style="overflow:hidden;"> 
    <div style="box-shadow:whatever;"> 
     This should cause scrollbars to show 
    </div> 
    </body> 
</html>

Una de dos cosas sucederá:

O bien el problema no aparecerá, en cuyo caso se llega a añadir lentamente hacia las otras cosas en su página de la vida real hasta que descubra qué causaba realmente el problema.

O el problema seguirá allí, en cuyo caso puede volver a informarnos aquí. También podrá presentar un informe de error con la gente de Mozilla.

¡Buena suerte!

Fuente

2010-02-26 19:12:11

Lo intenté, pero el comportamiento no cambió. Debo notar que hay ** barras de desplazamiento **, simplemente se desplaza - un poco como en el iphone ... (cuando tiene una lista y se desplaza hacia arriba, puede desplazarse hacia arriba más allá del alto de la lista) – Fabdrol

Si bien puede ser frustrante escuchar, eso no es un error, realmente es una característica. Si hay una barra de desplazamiento/área desplazable, y el área está activada y se está disparando una flecha u otro dispositivo de entrada, el área se desplazará a.

Para contrarrestar esto, puede intentar luchar contra cada posible entrada del usuario (desplazamiento del panel táctil, teclas de flecha, resaltar y arrastrar) con javascript, pero la mejor respuesta es replantearse cómo está utilizando CSS aquí. Intente usar width:auto en lugar de width:100%, por ejemplo.

Para demostrar (actualización):

CSS:

#parent { width:50px; height:20px;overflow:hidden; } 
#overflow { width:50px;height:50px;overflow:auto; }

HTML:

<div id="parent"> 
    <div id="overflow">blahaahhahahahahahahahahahahaaaaaaaaaaahahahahahaaaaaaaaaaaaaaahhhhhhhhhhhhhhhhhhahhaahahaha</div> 
</div>

Jack la altura de #parent hasta 50 px y ves la barra de desplazamiento still-- así que está tapado; el contenido no está oculto irremediablemente. Establezca overflow:hidden en #overflow, y no barras de desplazamiento.

Fuente

2010-02-28 09:51:10

¿Usted significa decir que el navegador toma 'scroll-input' (cualquier forma de desplazamiento) incluso cuando overflow está configurado como oculto? lo que significa que (suena lógico, si lo pienso ahora) todo lo que está "fuera de la página" no es visible, pero aún se puede usar? (Aunque podría cuestionar la usabilidad) – Fabdrol

Sí, esencialmente, aunque debería dejar de responder cuando estoy tan cansado. Entendí que estás diciendo que estás ocultando una barra de desplazamiento que existe en un div con desbordamiento: oculto en un padre. Si ese es el caso, entonces sí - si el desbordamiento: oculto está en el elemento con exceso de contenido, sin embargo, no se desplaza, simplemente lo corta. –

Echa un vistazo al ejemplo de código actualizado que di. El código es probablemente más claro que yo. :) –

Ya que estoy lidiando con el mismo problema molesto, voy a seguir adelante y repito aquí para decir que esto es definitivamente una característica de mierda (si de hecho debería ser referida como una característica). Tener una sombra de caja causa que una barra de desplazamiento sea inútil, aunque me gustaría comer mis palabras si alguien pudiera darme una realmente buena razón por la que debería ser así.

Creo que la respuesta aquí es simplemente hacer que la página sea un poco diferente y dejar que los usuarios de Firefox se pierdan la sombra de la caja. Es bastante fácil si no declaras -moz-box-shadow.

Fuente

2010-06-15 13:38:45 erskingardner

Totalmente de acuerdo con usted. Shadow nunca debe hacer que aparezcan barras de desplazamiento. Este no es el caso con WebKit, es solo un problema de Moz. – Elie

Esta respuesta debe aceptarse IMO. – Andy

Gracias por el voto de confianza @Andy. – erskingardner

Acabo de tener este problema con un diseño en el que estaba trabajando. Básicamente, Firefox crea un área desplazable para cualquier sombra que se extiende más allá del borde derecho de la página. Por alguna razón, Firefox no crea área desplazable si la sombra se extiende hacia la izquierda. Entonces mi solución simple es mover la sombra completamente a la izquierda.

Código Problemática:

-moz-box-shadow: 5px 5px 5px #000;

solución simple:

-moz-box-shadow: -5px 5px 5px #000;

Intenté fijar el desplazamiento x de a 0px, pero ya que la falta de definición es 5, todavía había un área de desplazamiento sobre 2- 3px de ancho

Fuente

2010-08-11 19:02:32

+1, esto definitivamente funciona para eliminar la barra de desplazamiento. Desafortunadamente, con un borrón de 20px, tienes que mover la sombra lo suficientemente lejos para que el espacio a la derecha sea bastante notable, pero bueno, es mejor que no tener ninguna sombra, supongo. –

No conozco el diseño de su sitio, pero en el mío solo quiero el desplazamiento vertical, y no horizontal. Eso sirve como parte de la base de por qué el sombreado de caja que causa el desplazamiento horizontal no es deseable para mí, ya que el CSS de mi sitio ahora es compilado para diseños que se extienden horizontalmente más allá de la ventana gráfica.

pude solucionarlo en Firefox 3.6 (eso es todo lo que he probado) y probado varios navegadores a Google Chrome 8.0.552.327 y el IE 8 con la siguiente regla CSS en mi elemento del cuerpo:

body{ 
    overflow-x: hidden; 
}

Fuente

2011-02-04 17:57:46 Rich

Puede usar el radio de dispersión (la 4ta. Longitud) para hacer que el tamaño de la sombra sea más pequeño que el tamaño del elemento y luego una compensación y grande para que se muestre debajo del elemento. Algo así como box-shadow: 0 10px 10px -5px black; (por supuesto que no sé qué valores necesitas ya que no ofreciste un violín, necesitas jugar con ellos en las herramientas de desarrollo). Tenga en cuenta que el radio de dispersión hace que la sombra se expanda/contraiga desde todos los lados. Entonces, por ejemplo, un radio de propagación de -1px en realidad hará que la sombra 2px sea más estrecha.

Fuente

2011-02-09 19:02:23

Pase al segundo párrafo para la solución real.

Según sus necesidades, el problema y la solución que encontré podrían satisfacer sus necesidades. Descubrí que mi problema era bastante similar, sin barra de desplazamiento cuando body { overflow: hidden; }, por lo que creo que los tamaños de html y de elementos del cuerpo están dictados por el tamaño del área visible de la ventana del navegador.

solución: Si el único problema es el desbordamiento del eje x, puede hacer body{ overflow-x: hidden; }, luego usar javascript o consultas de medios puede cambiar fácilmente las propiedades aplicadas al elemento del cuerpo y cambiarlo a lo que desee.

ejemplo:

body { overflow-x: hidden; } 

@media screen and (min-width: 1200px) { 
    body { overflow-x: visible; } 
}

esperanza esto ayuda.

Fuente

2012-02-16 08:18:27

Firefox y CSS3: utilizando overflow: hidden y box-shadow

Respuesta

Cuestiones relacionadas