WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 3 months ago

#26700 closed defect (bug) (fixed)

Post submit box buttons sometimes ignore click events

Reported by: ericlewis Owned by: nacin
Milestone: 3.8.1 Priority: high
Severity: normal Version: 3.8
Component: Administration Keywords: has-patch
Focuses: ui Cc:

Description

I would like to begin with an apology for the vagueness of this bug.

Ever since 3.8, I've noticed buttons in the Publish meta box not accepting click events on various installs.

I haven't been able to reproduce the bug solidly, but can sometimes. Again, apologies.

I go into a post, edit some of the content, and try clicking one of the buttons. It depresses but nothing happens.

See screencast for example.

Found on Chrome 31.0.1650.63 on Mac OS X.IX

Attachments (3)

26700.mov (9.0 MB) - added by ericlewis 4 months ago.
26700.2.mov (447.9 KB) - added by ericlewis 4 months ago.
26700.diff (1.3 KB) - added by johnbillion 3 months ago.

Change History (27)

ericlewis4 months ago

comment:1 ericlewis4 months ago

  • Component changed from General to Administration

comment:2 follow-up: ocean904 months ago

Do you have any plugins active? Can you see any JavaScript errors?

comment:3 in reply to: ↑ 2 ericlewis4 months ago

Replying to ocean90:

Do you have any plugins active? Can you see any JavaScript errors?

I can reproduce this on trunk with no plugins active, no JS errors in the console. I've had this issue on the make core site, my personal site, and on a local version of trunk, so I think there's something else at play.

I think it has to do with clicking on the outer region of the button - not directly on the button text, but between the text and the edge of the button. The button still depresses, and it's clearly clickable space within the button. When I click directly on the text it goes through.

comment:4 follow-up: johnbillion4 months ago

Now you mention it, I too have seen this behaviour but I usually put it down to "oh I missed that button again, but I thought I saw it depress...".

comment:5 in reply to: ↑ 4 kpdesign4 months ago

Replying to johnbillion:

Now you mention it, I too have seen this behaviour but I usually put it down to "oh I missed that button again, but I thought I saw it depress...".

I've seen the same thing, in the admin on several screens and the login screen, on make/ blogs and on my own installs, in Chrome and Firefox.

Like you, I thought I had missed it, but the button showed depressed.

comment:6 ericlewis4 months ago

[deleted]

Last edited 4 months ago by ericlewis (previous) (diff)

comment:7 ericlewis4 months ago

Occurred on the "Log in" button on install.php?step=2.

Seems to be related to buttons that are actually styled anchor tags.

comment:8 nacin4 months ago

  • Milestone changed from Awaiting Review to 3.8.1

Moving for investigation.

comment:9 jaredatch4 months ago

I just wanted to say thank you for creating this ticket.

This has been happening for months since MP6, so it's nothing new, but has been driving me crazy.

I deal with a ton of installs, and it affects all of them. Often times right after initial setup when no plugins are activated. Like you mentioned, I it don't happen all of the time, but I'd say a good 10% of the clicks it seems. Enough to irk me.

Originally I thought I was losing my mind, but I've talked to half a dozen other devs who have encountered this.

Lastly, it's not limited to the post submit box. I know I've had it happen with saving menus elements (and similar) as well.

comment:10 jaredatch4 months ago

  • Cc contact@… added

comment:11 griffinjt4 months ago

I confirm that this is a really freaking annoying issue too. Half the time I wonder why my page is not refreshing only to find out that the click event was never triggered. Happens to me in Chrome.

ericlewis4 months ago

comment:12 ericlewis4 months ago

attachment:26700.2.mov is a sequel to my earlier bug reproduction video.

Looks like it happens when you click directly on the descent. I also saw the same behavior clicking directly on the ascent. (See Typography Line Terms)

comment:13 follow-up: johnbillion4 months ago

Confirmed. There is indeed a 1px horizontal dead spot on the buttons where the descent is. I can reproduce it in Chrome on OS X but not Firefox, unless I haven't found the magic spot.

comment:14 in reply to: ↑ 13 nacin3 months ago

  • Keywords ui-focus added
  • Priority changed from normal to high

Replying to johnbillion:

Confirmed. There is indeed a 1px horizontal dead spot on the buttons where the descent is. I can reproduce it in Chrome on OS X but not Firefox, unless I haven't found the magic spot.

It's definitely more than this dead spot. This has been driving me crazy for both "Save Draft" and "Publish", and I'm definitely not finding a 1px dead spot every time. I'm usually clicking in the middle of the button.

comment:15 johnbillion3 months ago

I think this is due to the :active rule for the buttons which insets the button by 1px when depressed. I can't reproduce the bug with that :active rule removed. Anyone else?

Related Chrome bug: https://code.google.com/p/chromium/issues/detail?id=163854

comment:16 ericlewis3 months ago

  • Keywords ui-feedback added

So what we need to do here is change the :active state to something that does not move the button. UI team?

johnbillion3 months ago

comment:17 johnbillion3 months ago

  • Keywords has-patch added

26700.diff simply removes the change to the padding (which gives the inset effect) when buttons are active. The buttons retain a visible active state due to an inset box shadow. The secondary buttons actually have a slightly more prominent active state than primary buttons do.

Thoughts?

comment:18 ircbot3 months ago

This ticket was mentioned in IRC in #wordpress-dev by johnbillion. View the logs.

comment:19 iammattthomas3 months ago

In 26993:

Eliminate the 1px padding adjustment on active buttons because it creates an un-clickable dead zone 1px high and spanning the entire width of the button. Modify the background color of active buttons for better contrast to make the active state more obvious.

See #26700, props johnbillion.

comment:20 iammattthomas3 months ago

26700.diff fixed the issue for me, but as johnbillion mentioned, .button-primary's active state was less prominent than .button-secondary. To fix that, I made the :active button background darker than the hover state, where previously they were the same color.

comment:21 helen3 months ago

  • Keywords fixed-major added; ui-feedback removed

This is going to force a build and a bunch of modified files in the 3.8.1 partial if merged.

comment:22 nacin3 months ago

In 26998:

Eliminate the 1px padding adjustment on active buttons because it creates an un-clickable dead zone 1px high and spanning the entire width of the button.

Merges half of [26993] to the 3.8 branch.

props johnbillion.
see #26700.

comment:23 nacin3 months ago

  • Keywords fixed-major removed
  • Owner set to nacin
  • Status changed from new to reviewing

I *may* merge the rest of that changeset to 3.8.1. Let's see if we need a color build or not.

comment:24 nacin3 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed
Note: See TracTickets for help on using tickets.