[IE 11] Gap between element background and its box-shadow - by wagi_ch

Status : 

  External<br /><br />
		This item may be valid but belongs to an external system out of the direct control of this product team.<br /><br />
		A more detailed explanation for the resolution of this particular item may have been provided in the comments section.

ID 810756 Comments
Status Closed Workarounds
Type Bug Repros 12
Opened 12/5/2013 1:29:50 AM
Access Restriction Public


Depending on the size of the element, there is a (sub)pixel-gap between the element background and its box-shadow.

This could be related to https://connect.microsoft.com/IE/feedback/details/810522/unexpected-line-between-element-and-elements-shadow
Sign in to post a comment.
Posted by Microsoft on 4/4/2016 at 11:01 AM
We've moved! This issue is now being tracked at https://developer.microsoft.com/microsoft-edge/platform/issues/106001/
Posted by chstbb on 12/9/2014 at 10:12 AM
I am able to reproduce this issue while implementing the box-shadow method of implementing "full width browser bars" detailed here under "Update 2": http://css-tricks.com/full-browser-width-bars/.

I am using IE11 version 11.0.9600.17420, which according to this URL is the latest version: http://windows.microsoft.com/en-US/internet-explorer/download-ie.

That IE11 version is not the same version mentioned in the previous comment on 1/27/2014 at 12:58 PM.

Posted by Nick Morss on 10/21/2014 at 3:35 AM
I am still seeing this issue in V 11.0.9600.17239 please see attached screenshot
Posted by Ilya Streltsyn on 10/16/2014 at 12:30 PM
I reproduced the bug in the jsFiddle example (http://jsfiddle.net/nJbuF/): see attached file bug810756.png. The brightness of the unintended white lines depends on the size of the result window: at some sizes, they are solid white, while at others, they look like kind of semi-transparent. At some sizes, they seem to completely disappear, but resizing the window by just 1-2 pixels makes them appear again.

My browser/OS version: IE11.0.9600.17280 (with 11.0.12 update), Windows 7 Professional x64.
Posted by dubcanada on 10/9/2014 at 5:14 AM
Reproducing on 11.0.9600.17280

Basic box with

background: rgba(255,255,255,0.6);
box-shadow: 0px 0px 30px 20px rgba(255,255,255,0.6);

Attached a small screenshot.
Posted by Robert O'Rourke on 9/24/2014 at 9:02 AM
I'm seeing this with version 11.0.9600.17278

In a use-case where I'm using box shadow to make an element appear wider than it is there's a gap between the element background and its box-shadow at certain browser widths - you have to shrink/grow your browser to see it happen.

Here's a test case http://codepen.io/sanchothefat/pen/wjILi

There's also a pixel above/below the height of the box despite having 0 blur and 0 y value.
Posted by Drewcur on 9/10/2014 at 7:41 AM
This can still be reproduced in the latest version of IE11: 11.0.9600.17239 (Update Versions: 11.0.11 KB2976627).
You can reproduce this issue here: http://jsfiddle.net/fpyg7hy4/5/ (the red line should not appear if the box shadow is flush with the element).
Posted by roboyote on 7/7/2014 at 3:17 AM
Same issue here.
But additionally I have to complain the "blur" added although you set the third value of box-shadow to 0. I want to have a "sharp" shadow. You can see the expected result in any other browser. But IE11 is broken!

Please see example here: http://dabblet.com/gist/bf39bfaccffc032450a5

I also added screenshots. It does not appears on all elements, but depends on position and zoom level.

Posted by Clayton Gray Home Web Development on 3/28/2014 at 8:05 AM
Here is a site where you can view this bug live, it's on the dropdown navigation menu's 2nd tier <UL>, eg. CSS selector:
box-shadow: 0px 0px 5px 5px #000;

IE Version: 11.0.9600.16521
Posted by Microsoft on 1/28/2014 at 8:48 AM
Thank you for retesting. We will be investigating this issue further.

Best regards,
The Internet Explorer Team
Posted by wagi_ch on 1/28/2014 at 2:54 AM
Thanks for looking into this.

I can reproduce the error even on 11.0.9600.16476. I've attached a new screenshot showing the error and including the about dialog.
Please note that this bug can only be reproduced with certain element- and windowsizes. It is best seen as a flickering when resizing the browser window on a page containing a relative-sized element (such as the one in my fiddle).

To my eyes it looks like there's a difference in the way the coordinates for backgrounds and shadows are rounded.
Posted by Microsoft on 1/27/2014 at 12:58 PM
Hello wagi_ch,
Thank you for the feedback. I wanted to check with you to find out if the issue is reproducible on your pc after installing the latest update for Internet Explorer? The latest update would bring your IE version to 11.0.9600.16476. In our testing, we have not been successful in reproducing this issue. If you are still able to reproduce the issue can you please post the version of IE that you have installed?

Best regards,
The Internet Explorer Team