1px line at the bottom of the page

Issue #15352467 • Assigned to Bogdan B.


Jan 6, 2018
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Found in build #
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

I have noticed a 1px white(I intentionally change body back-ground color to white) line at the bottom of my site (potatosites.com 1st att) but in other browsers page renders perfectly fine(Chrome Moz. Opera). I can see this line on many other sites like https://www.netflix.com/ua/ (att 2- f11 full screen, att3 half screen). I intentionally changed html background-color to see it better. This line is not permanent on all window sizes and by resizing it may be visible or not. I can see the same bug in ie10 ie11 by emulating them from Microsoft edge. The problem is in html element or in body element. this is my css rules:
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
font-family: 'PT Sans Narrow’, sans-serif, serif;
font-size: 16px;
height: 100%;
position: relative;
overflow-x: hidden;
html, body{
font-weight: 400;
line-height: 1.6;
position: relative;
min-height: calc(100% - 192px);
padding-bottom: 192px;
background-color: #364449;
overflow-x: hidden;

and footer css
position: absolute;
bottom: 0;
height: 192px;
width: 100%;
z-index: 1;
background: transparent;
width: inherit;
height: 240%;
position: absolute;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
overflow-y: hidden;
position: absolute;
height: 94%;
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
width: 120%;
left: -10%;
bottom: -75%;
background-color: rgba(236,240,241 ,0.6);
content: '’;
position: absolute;
bottom: 9px;
top: 9px;
left: 0;
right: 0;
display: block;
background-image: url(‘…/images/darkfooter.png’);
height: calc(100% - 18px);
font-size: 0.9rem;
position: absolute;
bottom: 0;
height: 192px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
I’m using windows 10 screen resolution 1920X1080


Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “James M.”

    Changed Assigned To to “Bogdan B.”

You need to sign in to your Microsoft account to add a comment.

Sign in