examples - ¿Desea eliminar 1px del espacio transparente de CSS box-shadow en IE11?

create box shadow css

Question

Estoy usando CSS box-shadow para imitar un fondo que "sangra" en los bordes de la ventana del navegador. Funciona muy bien en Chrome, Firefox, Safari e Internet Explorer 9 y 10. Sin embargo, Internet Explorer 11 muestra un "espacio" transparente de 1px antes de la sombra de la casilla (negativa) izquierda.

Toma este HTML:

<div class="wrapper">
    <div class="widget">Test</div>
</div>

Y este CSS:

.wrapper {
    background:red;
    padding:20px 0;
}
.widget {
    width:600px;
    height:400px;
    margin:0 auto;
    text-align:center;
    background:white;
    box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
}

En la mayoría de los navegadores, el widget DIV tiene un fondo blanco y sombras blancas a la izquierda y a la derecha de la caja que llenan el ancho de la ventana del navegador sin espacios, saltos o rojo desde el envoltorio sangrado. En IE11 hay una línea roja de 1px que corre verticalmente a lo largo del lado izquierdo del widget DIV.

Eche un vistazo a este violín para ver un ejemplo: http://jsfiddle.net/Bxsdd/ . (Es posible que deba ajustar manualmente el ancho del panel Resultados del violín, ya que las pequeñas diferencias en el ancho de la ventana muestran el problema más aparentemente, de nuevo, solo en IE11).

Cosas que he tratado de eliminar el espacio transparente:

• Cambiar la box-shadow de box-shadow de usar em''s a usar px''s
• Sumando o restando 1px de los otros atributos box-shadow
• Añadiendo un borde alrededor del widget DIV
• Ajuste del padding , display , position y otros elementos CSS para el widget
• Tantas cosas que ni siquiera puedo recordar en este momento

¿Alguna idea de cómo eliminar el espacio transparente de 1px en IE11?

Answer 1

Ahora que sabemos que es un error, aquí hay una solución aceptable:

.widget {
    width:600px;
    height:400px;
    margin:0 auto;
    text-align:center;
    background:white;
    box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
    position:relative;
    z-index:2;
}
.widget:before, .widget:after {
    position:absolute;
    content: " ";
    width:1em;
    left:-1em;
    top:0;
    height:100%;
    background:white;
    z-index:1;    
}
.widget:after {
    left:auto;
    right:-1em;
}

Básicamente, estoy agregando absolutamente posicionado :before y :after pseudo elementos que no contienen más que el mismo color de fondo que el widget DIV y la box-shadow de box-shadow ese DIV. Estos pseudo elementos se desplazan justo hacia la izquierda y la derecha desde el widget DIV y se colocan detrás de él para que proporcionen el color correcto para el sangrado de la box-shadow la box-shadow .

Obviamente, esto agrega complicación si uno ya está utilizando los elementos :before & :after , pero esto funciona para mis propósitos. Supongo que también se podría intentar establecer márgenes negativos en el widget DIV.

Compruebe el violín aquí: http://jsfiddle.net/TVNZ2/

Answer 2

DaveE dio una buena solución. Yo también jugué con esto. Tuve un problema con el desenfoque superior e inferior de un cuadro de sombra, en lugar de izquierda y derecha. Eventualmente lo resolví simplemente agregando un borde en la parte superior y uso importante al lado.

.class
{
border-top:1px solid $colorBg !important;
border-bottom:1px solid $colorBg !important;
}

Tal vez no tan bien como la solución anterior, pero funcionó para mí.

Answer 3

En mi caso, tenía una línea blanca entre el fondo del div y la sombra y resolví el problema agregando una altura al div con decimales:

height:30px; -> height:30.1px; 

Answer 4

Encontré esta solución ( espacio pequeño entre la sombra de la caja y div cuando alfa se establece ) y funciona para mí: el ancho de div debe ser un número impar. ancho: 800px; => no funciona, pero ancho: 799px; => Obras y brecha blanca desaparecieron!

Answer 5

Pensé que iba a compartir mi respuesta a este problema. No puedo estar seguro de haber tenido el mismo problema exacto que todos los demás, pero lo que he observado es el siguiente: el problema ocurre en EI11 (y EI10 según otro que no he probado) cuando un elemento con un ancho de píxeles establecido se centra usando el margin: auto; (Mi caso fue un problema de izquierda / derecha). Noté que al cambiar el tamaño, el div se desplazaría hacia la derecha 1px en cada otro ancho de píxel de la pantalla.

Utilicé un fondo transparente para observar que, en lugar de que solo apareciera un espacio en la izquierda, el div se desplazó 1px hacia la derecha.

Cambiar el ancho del div 1px funciona en el ancho de pantalla actual. Sin embargo, cambiar el ancho de la pantalla traerá de vuelta el problema en cada píxel.

Para resolver el problema, necesitamos identificar el ancho de la pantalla como par o impar. En mi caso, incluso agregué una regla css a mi div culpable. La nueva regla cambia la posición izquierda por 0.5px.

Además, la función debe ser ejecutada en el tamaño de la pantalla.

A continuación se muestra el script que utilicé para solucionar el problema:

(function (window, document) {
  function isEven() {
      var windowWidth = window.innerWidth;
  // Find out if size is even or odd 
  if (windowWidth % 2 === 0) {
    document.querySelector("#container").classList.add("container_left_1px");
  } else {
    document.querySelector("#container").classList.remove("container_left_1px");
  }
};
document.addEventListener("DOMContentLoaded", isEven);
window.addEventListener((''onorientationchange'' in window) ? ''orientationchange'':''resize'', isEven);
})(this, this.document);

Y la regla css

.container_left_1px {left: .5px;}

Ejecutar el script solo en EI10 y 11 sería óptimo. Por favor, perdona mis secuencias de comandos ya que este es el primer js que he hecho. Por favor, siéntase libre de corregir cualquier problema. Esto solucionó mi problema; Espero que alguien lo encuentre útil!

Answer 6

Puedes rellenar el espacio con contorno: 1px color sólido; Funciono para mi

.container{
  display:block;
  position: relative;
  width:450px;
  height:450px;
  margin: 0 auto;
  background-color: #654d7f; 
}

.header-emphasis{
  position: absolute;  
  bottom:5px;
  max-width: 420px
}
span{
  position: relative;
  left:8px;
  background-color: white;
  padding:4px 4px 4px 0px;
  color: #666666;
  box-shadow: 6px 1px 0px 2px #ffffff, -8px 1px 0px 2px #ffffff;
  outline: 1px solid white;
}

<div class="container">
  <h3 class="header-emphasis">
    <span class="highlight">
      If there are no dogs in heaven then when i die i want to go         where they went.
    </span>
  </h3>
</div>

Answer 7

EL PROBLEMA:

Esto parece ser un problema graduado de transparencia / alias alfa relacionado con los cálculos de pixelación par / impar.

Lo mejor que puedo decir es que el color se está derramando en esa línea de píxeles, pero el cálculo de antialiasing está eliminando su valor alfa en un intento de intentar graduar la distinción de la sombra de caja con sus alrededores.

Eso está bien en el borde exterior de la sombra de la caja, pero no tan grande en el borde interior, ¡ es por eso que todos estamos aquí!

LO QUE (PRETTY MUCH) TRABAJÓ PARA MÍ (PURE CSS):

En mi caso de uso, esto se solucionó agregando varias sombras de cuadro adicionales (de valores diferentes y menores) así:

div {box-shadow: 10px 0px 0px 0px red, 
                 4px 0px 0px 0px red, 
                 3px 0px 0px 0px red, 
                 1px 0px 0px 0px red;}

Aunque no es elegante, esto aumenta de forma acumulativa el "derrame" en la línea interna de píxeles. Se necesitaron aproximadamente tres sombras de caja adicionales para lograr el valor deseado, lo que sugiere que el derrame de suavizado de antialias se establece en aproximadamente el 25%. Diferentes densidades de dispositivos pueden cambiar eso?

Simplemente repetir la misma caja de sombra no funcionó, así que supongo que IE los trató como un error de repetición y los ignoró.

LA PARTE "PRETTY MUCH" (PARA MÍ):

En mi caso de uso, estaba agregando una sombra de cuadro puramente horizontal a la derecha de un espacio de texto para crear la impresión de relleno si la línea se rompía y se convertía en más de una línea. No estaba agregando una sombra en la parte superior o inferior o alrededor de un div.

La parte "bastante" para mí es que hay un pequeño "punto" de derrame vertical de aproximadamente 1px o 2 píxeles en la parte superior e inferior de la línea de píxeles en ciertos anchos. Esencialmente, el mismo problema anterior a la inversa.

No ideal, pero mucho más preferible que tener una línea completa transparente.

Espero que esto funcione para usted (el lector) en otros escenarios similares, pero no lo he probado.

¡Buena suerte, y todos agradecemos a los buenos "IE" por sus "desafíos"! ;)