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

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!