WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 11 months ago

#35166 assigned defect (bug)

strange effect in tab active

Reported by: Hrohh Owned by: misfist
Milestone: Future Release Priority: normal
Severity: normal Version: 4.4
Component: Administration Keywords: good-first-bug has-patch
Focuses: ui Cc:

Description

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;
}

Attachments (9)

35166-about-page.gif (32.1 KB) - added by ocean90 22 months ago.
35166-menus.gif (20.8 KB) - added by ocean90 22 months ago.
35166.diff (473 bytes) - added by coderste 22 months ago.
about-chrome.png (67.4 KB) - added by misfist 18 months ago.
About Page Chrome
about-ff.png (65.7 KB) - added by misfist 18 months ago.
About Page Firefox
nav-menus-chrome.png (53.1 KB) - added by misfist 18 months ago.
Nav Menus Chrome
nav-menus-ff.png (62.6 KB) - added by misfist 18 months ago.
Nav Menus Firefox
35166.2.diff (791 bytes) - added by rleeson 18 months ago.
Border scaling workarounds
35166.patch (456 bytes) - added by riddhiehta02 11 months ago.
Patch modify and added border to the element on hover effect.

Download all attachments as: .zip

Change History (24)

#1 @afercia
2 years ago

  • Component changed from General to Administration

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 :)

#2 @afercia
2 years ago

  • Keywords reporter-feedback added

@ocean90
22 months ago

#3 @ocean90
22 months ago

  • Keywords needs-patch good-first-bug added; reporter-feedback removed
  • Milestone changed from Awaiting Review to Future Release

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

#4 follow-up: @afercia
22 months ago

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

#5 in reply to: ↑ 4 @bhargavbhandari90
22 months ago

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.

Last edited 22 months ago by bhargavbhandari90 (previous) (diff)

#6 @coderste
22 months ago

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 :)

@coderste
22 months ago

#7 @trot77
20 months ago

  • Keywords has-patch added; needs-patch removed

#8 @trot77
20 months ago

Patch looks good. Tested it and worked fine.

#9 @fischfood
20 months ago

Confirming fixed on Menus area and about.php

#10 @toddmilliken
20 months ago

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

#11 @lukecavanagh
19 months ago

@Hrohh

Patch works well.

@misfist
18 months ago

About Page Chrome

@misfist
18 months ago

About Page Firefox

@misfist
18 months ago

Nav Menus Chrome

@misfist
18 months ago

Nav Menus Firefox

#12 @misfist
18 months ago

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
18 months ago

Border scaling workarounds

#13 @rleeson
18 months ago

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

Last edited 18 months ago by rleeson (previous) (diff)

@riddhiehta02
11 months ago

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

#15 @DrewAPicture
11 months ago

  • Owner set to misfist
  • Status changed from new to assigned

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

Note: See TracTickets for help on using tickets.