strange effect in tab active

[Hrohh]

If I click on tab, there is strange effect on bottom-border. I figure out, that problem is global

a { 
    -webkit-transition-property: border,background,color;
    transition-property: border,background,color;
}

In admin css there should be:

/* fix for strange effect */
.nav-tab-active {
    -webkit-transition-property: background,color;
    transition-property: background,color;
}

[afercia]

Hi @Hrohh and thanks for your report. As far as I can tell, Core doesn't use Tabs animated with JavaScript which will expose that CSS transition. In the "About" screens, "Menus" screen, and Network "Sites" screens, each tab reloads a new page.

Sometimes Plugins use JavaScript based Tabs with the Core styles, in this case the bottom border will be transitioned exactly like the background color. I wouldn't consider this a bug. Curious in which plugin have you noticed this? Would like to double check what's happening :)

[ocean90]

@afercia This doesn't seem to be related to JavaScript. I can reproduce it on the about page, see 35166-about-page.gif​, and on the menu screen, see 35166-menus.gif​.

[afercia]

@ocean90 interesting, I think that's a different issue that happens in the responsive view, seems just when hovering on the active tab, right? By the way @Hrohh mentioned a strange effect when clicking on a tab:

If I click on tab ...

and since when clicking on the tabs in the admin there's a page reload, was wondering what the strange effect is. Some plugins use tabs for "in page" content instead and maybe the animation on the border is causing some visual glitch. Couldn't reproduce though.

[bhargavbhandari90]

Replying to afercia: Yes what effect I don't understand when clicking on that tab.

@ocean90 interesting, I think that's a different issue that happens in the responsive view, seems just when hovering on the active tab, right? By the way @Hrohh mentioned a strange effect when clicking on a tab:

If I click on tab ...

and since when clicking on the tabs in the admin there's a page reload, was wondering what the strange effect is. Some plugins use tabs for "in page" content instead and maybe the animation on the border is causing some visual glitch. Couldn't reproduce though.

[coderste]

Regarding the issue @ocean90 pointed out. I believe this is because when you hover on an item that is active there is no CSS inside the @media screen and (max-width: 600px) for an active tab therefore it is using the desktop CSS which is using a border-bottom: 1px solid #f1f1f1; on hover hence it removing the bottom border.

I have attached a patch that fixes the issue but if it doesn't relate to this ticket I will create a new one :)

[trot77]

Patch looks good. Tested it and worked fine.

[fischfood]

Confirming fixed on Menus area and about.php

[toddmilliken]

Patch looks good on credits.php. Tested on Chrome / Firefox on Mac.

[lukecavanagh]

@Hrohh

Patch works well.

[misfist]

About Page Chrome

[misfist]

About Page Firefox

[misfist]

Nav Menus Chrome

[misfist]

Nav Menus Firefox

[misfist]

My understanding of this issue is that on smaller screens (max-width: 600px) only, the bottom border on the active tab appears to disappear on hover.

I tested the patch in Firefox 50.0.2 and Chrome 54.0.2840.98 (OS X 10.10.5) and it seems to work: on smaller screens, the bottom border remains on hover.

[rleeson]

Border scaling workarounds

[rleeson]

Chrome scales the border to 80% of the requested size. I attempted transform scale overrides, to reset the scale to 1, which were unsuccessful. Instead, I set the bottom border color to transparent, which should work across any color theme.

Additionally, there is an image report showing another border issue, with the Menu Page and Category sub-selection boxes, due to the same scaling problem. This is slightly different, as it needs to overlap the differently colored border beneath it. I doubled the border size, and continued to have it match the background color.

Patch 35166.2

[lukecavanagh]

35166.2.diff​ Applies cleanly.

[riddhiehta02]

Patch modify and added border to the element on hover effect.

[DrewAPicture]

Assigning ownership to mark the good-first-bug as "claimed".

[audrasjb]

Hi there,

Looks like the issue doesn't exists anymore.
See animated screenshots above.

Adding reporter-feedback and close keyword (before closing as worksforme)

Cheers,
Jb

[SergeyBiryukov]

Appears to be fixed in [45276].