I'm working on a webextension and I have a new problem ever since I upgraded to firefox quantum: The popup menu for my extension messes up the hover by staying partially highlighted. 
.
As you can see in the gif, the first element remains partially highlighted even when I am hovering over the bottom and the bottom remains partially highlighted even when I am hovering over the top.
This only happens in firefox and works just fine in google chrome.
What do I need to do to fix this issue? Is there anything in specific I am missing or is this an issue with the new firefox update?
I've created a minimal extension to reproduce the issue:
Create a manifest.json with the following contents:
{
"manifest_version": 2,
"name": "test",
"version": "1.0.0",
"browser_action": {
"browser_style": true,
"default_popup": "choose_page.html"
}
}
Create a document called choose_page.css with the following contents:
html, body {
width: 250px;
}
.common {
}
.common:hover {
background-color: #CFF2F2;
}
and an html page called choose_page.html with the following contents:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="choose_page.css"/>
</head>
<body>
<div class="common">Enable/Disable</div>
<div class="common" id="sidebar">Show/Hide</div>
</body>
</html>
I believe this is a bug on firefox's part, so I've submitted a bug here: https://bugzilla.mozilla.org/show_bug.cgi?id=1422187