Remove 1px transparent space from CSS box-shadow in IE11?

Question

I\'m using CSS box-shadow to mimic a background that \"bleeds\" to the edges of the browser window. It works great in Chrome, Firefox, Safari, and Internet Exp

Answer 1

In my case, I had a white line between the div bottom and the shadow and I resolved the issue adding a height to the div with decimals:

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

Answer 2

DaveE gave a nice solution. I played with this myself as well. I had an issue with the top and bottom blur of a box-shadow, instead of left and right. I eventually solved it by just adding a border on top and use important next to it.

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

Perhaps not as well tought out as the previous solution, but it worked for me.

Answer 3

You can fill the space with outline:1px solid color; It worked for me.

.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 4

I thought I would share my answer to this issue. I cannot be sure that I have had the same exact problem as everyone else, but what I have observed is this: The problem occurs in EI11 (and EI10 according to other which I have not tested) when an element with a set width of pixels is centered using margin: auto; (my case was a left/right issue). I noticed that on resize, the div would shift over to the right 1px on every other pixel width of the screen.

I used a transparent background to observe that instead of just a gap appearing on the left, the div did in fact shift 1px to the right.

Changing the width of the div 1px does work on the current screen width. However, change the screen width will bring back the problem on every other pixel.

To solve the issue, we need to identify the screen width as even or odd. In my case, on even I added a css rule to my culprit div. The new rule changes the left positioning by 0.5px.

Furthermore, the function needs to be executed on the screen resize.

Below is the script I used to fix the issue:

(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);

And the css rule

.container_left_1px {left: .5px;}

Executing the script only on EI10 and 11 would be optimum. Please forgive my scripting as this is the first js I have made. Please feel free to correct any issues. This solved my problem; I hope someone finds it helpful!

Answer 5

Found this solution(Small space between box shadow and div when alpha set) and it works for me: div width must be an odd number. width: 800px; => not working, but width:799px; => works and white gap disappeared!

Answer 6

THE PROBLEM:

This appears to be an graduated alpha transparency/aliasing issue to do with even/odd pixelation calculations.

As best I can tell, colour is spilling into that pixel line but the antialiasing calculation is stripping its alpha value in an attempt to try graduate the distinction of the box-shadow with its surrounds.

That is fine on the outside border of the box shadow, but not so great in the inside border - which is why we are all here!

WHAT (PRETTY MUCH) WORKED FOR ME (PURE CSS):

In my use case, this was fixed by adding several additional box-shadows (of different and lesser values) like so:

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

Though not elegant, this cumulatively increase the "spill" into the inner pixel line. About three additional box-shadows were required to achieve the desired value - suggesting the antialiasing spill is set at about 25%. Different device densities may change that?

Simply repeating the same box-shadow didn't work - so I am guessing IE treated them as an repetition error and ignored them.

THE "PRETTY MUCH" PART (FOR ME):

In my use case I was adding a purely horizontal box shadow to the right of a text span to create the impression of padding if the line broke and became more than one line. I wasn't adding a shadow to the top or bottom or around a div.

The "pretty much" part for me is that there is a little vertical spill "dot" of about 1px or 2 pixels at the top and bottom of pixel line at certain widths. Essentially, the same problem above in reverse.

Not ideal, but far more preferable than having a whole line transparent.

I hope this will work for you (the reader) in similar other scenarios, but I haven't tested this.

Good luck, and let's all thank good ol' IE for its "challenges"!! ;)