ARTICLE AD BOX
Problem:
I have been trying to create my own pop-up for a Google Chrome extension that I have been working on. I have barely started, and have already come across an issue with the styling of the pop-up. There is an outline that appears around the pop-up page slightly and is slightly offset. It ruins the design of the pop-up, especially as I am not the one who has added it.
Tried solutions:
I have tried multiple fixes, such as changing the width and height of the body and HTML tag. I have tried other fixes, such as setting the outline for multiple tags. But none have worked. I have found that none of what I do in CSS or html have helped fix the issue.
Observations:
I have found that the bottom part of the outline is bigger than all of the other sides, and when I slightly change the CSS or HTML, the size of the bottom outline also changes. Additionally, when I click on the extension and the fade-in animation plays, and there appears are no visual glitches. Right after the fade-in animation, the glitches appear. Once I click off the extension and the fade-out animation appears, the visual glitches disappear.
Additionally, I have found that this visual glitch is happening to all pop-ups of the extensions I have downloaded. In the image attached, you can see how the issue is also happening to AdGuard.
JSON
{ "manifest_version": 3, "name": "Example", "version": "1.0", "description" : "Example", "action": { "default_popup": "index.html", "default_icon": { "16": "images/extension_icon16.png", "32": "images/extension_icon32.png" } }, "icons": { "16": "images/extension_icon16.png", "32": "images/extension_icon32.png", "48": "images/extension_icon48.png", "128": "images/extension_icon128.png" } }HTML
<!DOCTYPE html> <html> <head> <title>Example</title> <link rel="stylesheet" href="styles.css"> <!--<script src="script.js" defer></script>--> </head> <body> <h1 id="title">Example</h1> </body> </html>CSS
body { width: 300px; height: 400px; background-color: white; } #title { text-align: center; color: black; }
