0

I'm building an extension for Google Chrome and I'm noticing an issue where there's a small white line at the bottom and right side of my popup. Not sure what could be adding this here since I'm not changing the margin anywhere in my CSS.

Screenshot

popup.html:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="../styles/popup.css" />
    </head>
    <body>
        <div class="mainContainer"></div>
    </body>
</html>

popup.css:

:root {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    background-color: #262b40;
}

.mainContainer {
    width: 40rem;
    height: 40rem;
}
wOxxOm
  • 65,848
  • 11
  • 132
  • 136
aekala
  • 1
  • 2

2 Answers2

1

It's because your monitor's resolution scale is 125% I have the same issue however 100% shows no weird lines. It's a bug, nothing to do with HTML really. I might try and report it to Chrome, it's kind of annoying.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Koala
  • 11
  • 2
0

The horizontal & vertical Line could be the scroll bars. can you specify the max height & max width of the container so that it will automatically be hidden.

you can also use css property to hide the scroll bars.

overflow: hidden;
ihappyk
  • 525
  • 1
  • 5
  • 16
  • there's isn't any scrolling in the container, but I tried adding this CSS property anyway and no difference – aekala Mar 16 '22 at 23:40
  • can you post the html that your trying to display it on the click of chrome extension? – ihappyk Mar 17 '22 at 12:02
  • the html is posted in the question. The actual html for the extension is more involved so I wrote this barebones code to demonstrate the issue. – aekala Mar 17 '22 at 16:20
  • did you try adding margin:0 to the body? also try with padding:0 . – ihappyk Mar 17 '22 at 16:38