karlhorky/gray

White line around images on IE11

frontero opened this issue · 3 comments

frontero commented

The script works fine except on IE11. If images are next to each other it shows a white line around the image after the script has loaded. Example here:
https://www.burobenk.nl/het-team-van-benk

karlhorky commented

Hi there, thanks for the issue.

I tried opening the site in Chrome first, and I also saw borders between the images.

screen shot 2017-10-17 at 16 55 40

Upon closer inspection, I see that the columns are being assigned half pixel widths (at least on my 13" MacBook Pro).

screen shot 2017-10-17 at 16 56 32

Half-pixel widths can lead to weirdness and cross-browser inconsistencies. This may also be the problem, as opposed to there being an issue with the IE polyfill.

Does the issue go away if you have a container that can be cleanly divided by 4 without half-pixel width columns?

frontero commented

Thanks! That was the solution. The Bootstrap container is 1170px width / 4 = 292.5px.

I've added a margin-right: -1px and it was fixed.

karlhorky commented

Great, glad it worked. Closing this issue.