• 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

PASS

Active member
#2
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);
}
 

Mike

XenForo developer
Staff member
#3
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.
 

Mike

XenForo developer
Staff member
#8
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.
 

Mike

XenForo developer
Staff member
#9
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).
 

PASS

Active member
#10
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).
Just regular 24" monitors but I do not see it anymore at default zoom (100%). Chrome and FF seem OK now.
 

Mike

XenForo developer
Staff member
#11
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.