1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Browser Issue Nav Bar Style Issue

Discussion in 'Resolved Bug Reports' started by PASS, Oct 16, 2015.

  1. PASS

    PASS Active Member

    header-bug.png
     
    semprot likes this.
  2. PASS

    PASS Active Member

    I don't think this is the correct way to resolve it but changing top: 27px to 26px here seems to fix it and it now looks the same on all. Something is causing a 1 px shift in FF and Edge.

    Code:
    .navTabs .navTab.selected .tabLinks
    {
        background-color: rgb(25, 25, 25);
        width: 100%;
        padding: 0;
        border: none;
        overflow: hidden;zoom:1;
        position: absolute;
        left: 0px;
        top: 27px;
        height: 25px;
        background-position: 0px -25px;*
        clear:expression(style.width = document.getElementById('navigation').offsetWidth + 'px', style.clear = "none", 0);
    }
     
  3. Mike

    Mike XenForo Developer Staff Member

    I would note that I don't see this on any browser at default zoom levels. I do see it in some cases at a higher zoom level, but I think it's a sub-pixel rendering issue in that case.

    The example does hide the issue, but mostly because it moves things up and hides the overlap. You can see this at an extreme zoom in Chrome: (Note Chrome doesn't exhibit the issue.)

    Before
    upload_2015-10-19_12-33-11.png

    After
    upload_2015-10-19_12-33-34.png

    So it hides the whole bottom border.

    Changing the height of the selected tab to 25.1 or 25.2 px solves the issue, but given that the height of the container is also set to 25px, the issue doesn't seem to make sense. When I start digging into FF and zooming in to trigger the issue, I do see values that should be whole pixels become fractional, which is likely the cause of the issue. I don't really understand why this is (why is a border going from 1px in CSS to .76666667px when computed).

    I feel like this might be likely to be tagged as browser bug.
     
    PASS, Mike Creuzer and Steve F like this.
  4. rafass

    rafass Well-Known Member

    I've seen also 1 pixel of difference here:
    chrome.jpg firefox.jpg
     
  5. Mike Creuzer

    Mike Creuzer Well-Known Member

    Sub-pixel rendering issue there as well, @rafass I noticed it as well. But the browsers are learning :D
     
    PASS likes this.
  6. PASS

    PASS Active Member

    I see at default zoom in FF.

    Untitled-4.png

    On Edge and Chrome it only comes up when not at default zoom so that seems OK.
     
  7. IPF

    IPF Active Member

    @Mike is right. I had the same issue (line under the tab) and posted about it here. It happens when we zoom.
     
  8. Mike

    Mike XenForo Developer Staff Member

    Well he's saying he sees it the default zoom level. I assume that's 100%?

    I don't see why it should happen like that. Are you running a high DPI device? There shouldn't be anything other than integer pixel values at 100%, so I don't see why it should fail to display correctly.
     
  9. Mike

    Mike XenForo Developer Staff Member

    Can anyone else reproduce this without zooming? If so, is your display high DPI or anything like that?

    As it stands, I don't see why this is happening as changing the CSS actually makes it incorrect (forcing a 1px overlap to hide the issue).
     
  10. PASS

    PASS Active Member

    Just regular 24" monitors but I do not see it anymore at default zoom (100%). Chrome and FF seem OK now.
     
  11. Mike

    Mike XenForo Developer Staff Member

    If it's not happening to you now (and we haven't had any other reports of it), I'm going to call it a browser issue. Perhaps it has been fixed in a recent FF patch.
     

Share This Page