Browser issue Nav Bar Style Issue

[PASS]

 

[PASS]

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.

.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]

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


After


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.

 

[rafass]

I've seen also 1 pixel of difference here:

 

[Dad.]

Sub-pixel rendering issue there as well, @rafass I noticed it as well. But the browsers are learning

 

[PASS]

When I start digging into FF and zooming in to trigger the issue

I see at default zoom in FF.



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

 

[IPF]

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

 

[Mike]

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]

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]

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]

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.