qbittorent webUI has issue in palemoon

[Harkonnen]

In qbittorent webUI there is a menu bar on top, with dropdown menu. In chrome and firefox, it function as one would expect from dropdown menu, but in palemoon, dropdown closes as soon as mouse is moved below menu bar, rendering them unusable

I cant provide a link obviously as its not a website, but below is two code snippets, one with relevant part of html, the other with a relevant css. There is also javascipt involved, so it maybe not strictly related to css
here is a link to qbittorent repository webui content https://github.com/qbittorrent/qBittorrent/tree/master/src/webui/www/private

Code: Select all

         <div id="desktopNavbar">
                <ul>
                    <li>
                        <a class="returnFalse">File</a>
                        <ul>
                            <li><a id="uploadLink"><img class="MyMenuIcon" alt="Add Torrent File..." src="images/list-add.svg" height="16" width="16">Add Torrent File...</a></li>
                            <li><a id="downloadLink"><img class="MyMenuIcon" alt="Add Torrent Link..." src="images/insert-link.svg" height="16" width="16">Add Torrent Link...</a></li>
                            <li class="divider"><a id="logoutLink"><img class="MyMenuIcon" alt="Logout" src="images/system-log-out.svg" height="16" width="16">Logout</a></li>
                            <li><a id="shutdownLink"><img class="MyMenuIcon" alt="Exit qBittorrent" src="images/application-exit.svg" height="16" width="16">Exit qBittorrent</a></li>
                        </ul>
                    </li>
                    <li>
                        <a class="returnFalse">Edit</a>
                        <ul>
                            <li><a id="resumeLink"><img class="MyMenuIcon" alt="Resume" src="images/torrent-start.svg" height="16" width="16">Resume</a></li>
                            <li><a id="pauseLink"><img class="MyMenuIcon" src="images/torrent-stop.svg" alt="Pause" height="16" width="16">Pause</a></li>
                            <li><a id="resumeAllLink"><img class="MyMenuIcon" alt="Resume All" src="images/torrent-start.svg" height="16" width="16">Resume All</a></li>
                            <li><a id="pauseAllLink"><img class="MyMenuIcon" alt="Pause All" src="images/torrent-stop.svg" height="16" width="16">Pause All</a></li>
                            <li class="divider"><a id="deleteLink"><img class="MyMenuIcon" src="images/list-remove.svg" alt="Remove" height="16" width="16">Remove</a></li>
                            <li id="topQueuePosItem" class="divider invisible"><a id="topPrioLink"><img class="MyMenuIcon" src="images/go-top.svg" alt="Top of Queue" height="16" width="16">Top of Queue</a></li>
                            <li id="increaseQueuePosItem" class="invisible"><a id="increasePrioLink"><img class="MyMenuIcon" src="images/go-up.svg" alt="Move Up Queue" height="16" width="16">Move Up Queue</a></li>
                            <li id="decreaseQueuePosItem" class="invisible"><a id="decreasePrioLink"><img class="MyMenuIcon" src="images/go-down.svg" alt="Move Down Queue" height="16" width="16">Move Down Queue</a></li>
                            <li id="bottomQueuePosItem" class="invisible"><a id="bottomPrioLink"><img class="MyMenuIcon" src="images/go-bottom.svg" alt="Bottom of Queue" height="16" width="16">Bottom of Queue</a></li>
                        </ul>
                    </li>
                    <li>
                        <a class="returnFalse">View</a>
                        <ul>
                            <li><a id="showTopToolbarLink"><img class="MyMenuIcon" src="images/checked-completed.svg" alt="Top Toolbar" height="16" width="16">Top Toolbar</a></li>
                            <li><a id="showStatusBarLink"><img class="MyMenuIcon" src="images/checked-completed.svg" alt="Status Bar" height="16" width="16">Status Bar</a></li>
                            <li><a id="showFiltersSidebarLink"><img class="MyMenuIcon" src="images/checked-completed.svg" alt="Filters Sidebar" height="16" width="16">Filters Sidebar</a></li>
                            <li><a id="speedInBrowserTitleBarLink"><img class="MyMenuIcon" src="images/checked-completed.svg" alt="Speed in Title Bar" style="opacity: 0;" height="16" width="16">Speed in Title Bar</a></li>
                            <li class="divider"><a id="showSearchEngineLink"><img class="MyMenuIcon" src="images/checked-completed.svg" alt="Search Engine" style="opacity: 1;" height="16" width="16">Search Engine</a></li>
                            <li><a id="showRssReaderLink"><img class="MyMenuIcon" src="images/checked-completed.svg" alt="RSS" style="opacity: 1;" height="16" width="16">RSS Reader</a></li>
                            <li class="divider"><a id="StatisticsLink"><img class="MyMenuIcon" src="images/view-statistics.svg" alt="Statistics" height="16" width="16">Statistics</a></li>
                        </ul>
                    </li>
                    <li>
                        <a class="returnFalse">Tools</a>
                        <ul>
                            <li><a id="preferencesLink"><img class="MyMenuIcon" src="images/configure.svg" alt="Options..." height="16" width="16">Options...</a></li>
                            <li><a id="registerMagnetHandlerLink"><img class="MyMenuIcon" src="images/torrent-magnet.svg" alt="Register to handle magnet links..." height="16" width="16">Register to handle magnet links...</a></li>
                        </ul>
                    </li>
                    <li>
                        <a class="returnFalse">Help</a>
                        <ul>
                            <li><a id="docsLink" target="_blank" href="http://wiki.qbittorrent.org/"><img class="MyMenuIcon" src="images/help-contents.svg" alt="Documentation" height="16" width="16">Documentation</a></li>
                            <li class="divider"><a id="bugLink" target="_blank" href="https://www.qbittorrent.org/donate"><img class="MyMenuIcon" src="images/wallet-open.svg" alt="Donate!" height="16" width="16">Donate!</a></li>
                            <li><a id="aboutLink"><img class="MyMenuIcon" src="images/help-about.svg" alt="About" height="16" width="16">About</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

Code: Select all

#desktopNavbar {
    background: #f2f2f2;
    /*background-color: #ccc;*/
    border-bottom: 1px solid #3f3f3f;
    height: 20px;
    margin: 0 0px;
    overflow: hidden; /* Remove this line if you want the menu to be backward compatible with Firefox 2 */
}

#desktopNavbar ul {
    font-size: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#desktopNavbar > ul > li {
    float: left;
}

#desktopNavbar a {
    display: block;
}

#desktopNavbar ul li a {
    color: #333;
    font-weight: normal;
    padding: 2px 10px 6px;
}

#desktopNavbar ul li a:hover {
    background-color: #fff;
    color: #333;
}

#desktopNavbar ul li a.arrow-right,
#desktopNavbar ul li a:hover.arrow-right {
    background-image: url("../images/arrow-right.gif");
    background-position: right 7px;
    background-repeat: no-repeat;
}

#desktopNavbar li ul {
    background: #fff url("../images/bg-dropdown.gif") repeat-y;
    border: 1px solid #3f3f3f;
    left: -999em;
    margin-top: -6px;
    position: absolute;
    z-index: 8000;
}

#desktopNavbar li:hover ul ul,
#desktopNavbar li.ieHover ul ul,
#desktopNavbar li:hover ul ul ul,
#desktopNavbar li.ieHover ul ul ul {
    left: -999em;
}

#desktopNavbar li ul ul {
    /* third-and-above-level lists */
    margin: -22px 0 0 163px;
}

#desktopNavbar li ul li .check {
    background: #555;
    font-size: 1px;
    height: 5px;
    left: 6px;
    line-height: 1px;
    overflow: hidden;
    position: absolute;
    top: 8px;
    width: 5px;
}

#desktopNavbar li ul li a {
    color: #3f3f3f;
    font-weight: normal;
    min-width: 120px;
    padding: 1px 10px 1px 20px;
    position: relative;
}

#desktopNavbar li ul li a:hover {
    background: #6c98d9;
    border-radius: 2px;
    color: #fff;
}

#desktopNavbar li ul li a:hover .check {
    background: #fff;
}

/* lists nested under hovered list items */
#desktopNavbar li:hover ul,
#desktopNavbar li.ieHover ul,
#desktopNavbar li li.ieHover ul,
#desktopNavbar li li li.ieHover ul,
#desktopNavbar li li:hover ul,
#desktopNavbar li li li:hover ul {
    left: auto;
}

/* For IE7 */
#desktopNavbar li:hover {
    position: static;
}

[back2themoon]

Which qB version are you talking about? I see no such problem in v.4.3.x.

[Harkonnen]

Which qB version are you talking about? I see no such problem in v.4.3.x.

4.5.2

[back2themoon]

I'd check the changes between 4.3.9 and 4.5.2 for potential clues.

In any case, since the Web UI is not easily accessible, you should post this as a qB issue too so they may check what is going on.

[Moonchild]

Is there a gap between the menu bar and the menus? Some menus have a 1 px gap (relying on specific rounding behaviour of rendering engines to make it pixel-perfect flush, but not accounting for other engines) and if the mouse passes over such a gap it may collapse the menu as if you moved off of it entirely.

[Harkonnen]

Is there a gap between the menu bar and the menus? Some menus have a 1 px gap (relying on specific rounding behaviour of rendering engines to make it pixel-perfect flush, but not accounting for other engines) and if the mouse passes over such a gap it may collapse the menu as if you moved off of it entirely.

Yes, i think you are correct, there is a gap. Its not easily noticeable, but when i taken screenshots and enlarged them, there is a clearly a gap on palemoon, but not on chrome.

[Moonchild]

Then it really does come down to qBittorrent's front-end styling and is a bug on their end. Goanna does not render things the same, especially fractional borders are handled differently; qBittorrent needs to account for that in their menu CSS instead of making everything 100% flush in their preferred engines.