14

I don't know whether this just started or perhaps it's actually something new in my browser, but it must come down to SE code ultimately and I've never noticed it before today/yesterday.

Submit a comment via the "Add Comment" button, or submit a close-vote, or post a question, or do anything really that involves clicking one of those kinds of buttons, in Chrome 48 on Windows 7 64-bit, and you'll see your mouse cursor very briefly turn into the "not allowed" cursor right before the button is removed.

It seems the button is being disabled or whatnot before it's being hidden, which results in this "flash of malstyled content". Not a big deal but a little annoying.

  • 1
    Huh, I've noticed that, too. Not sure where it's coming from off the top of my head, but I'll ask around/look tomorrow. – Adam Lear Feb 23 '16 at 5:19
  • 3
    I guess it's not entirely unexpected that the button disables to indicate you can't click it again while the action is in progress, but hrm. – Tim Stone Feb 23 '16 at 5:39
  • 2
    And now I can't ignore this. Thank you – Rohit Kharsan Feb 23 '16 at 6:24
  • @RohitKharsan: lolol sorry – Lightness Races in Orbit Feb 23 '16 at 8:26
  • @TimStone: Agreed - my OCD is engaged in a serious battle over this one :P – Lightness Races in Orbit Feb 23 '16 at 8:27
  • Let's see it happening... yup. IMO not a bug, and better not be changed. As @Tim mentioned, the button is being disabled to prevent further clicks that will result in duplicate comments/posts, and they just changed the cursor for the disabled buttons, which is fine. – Shadow The Dragon Wizard Feb 23 '16 at 8:52
  • 2
    @ShadowWizard: The flash of cursor icon is very distracting and clearly not ideal behaviour! What purpose does it serve when the dialog (and button) are immediately hidden thereafter? None. This is a UX problem. – Lightness Races in Orbit Feb 23 '16 at 11:19
  • @Pref for me it's a sign "you can't click that button". – Shadow The Dragon Wizard Feb 23 '16 at 11:24
  • 1
    @ShadowWizard: Which is pointless because you literally don't have time to click it anyway. i.imgur.com/pmvTky8.gifv How can this be desired behaviour? – Lightness Races in Orbit Feb 23 '16 at 11:26
  • 1
    This is a global application of the style. It also shows up in the review queue where certain buttons are active and others aren't. See this view from TeX.SE review queue. – Werner Feb 23 '16 at 15:29
  • I'm kind of guessing that it was added intentionally.. And it does kind of make sense, although it doesn't really seem to be done right. In fact, with my super slow internet connection, it stays in that disallowed state for several seconds (yes, really, it's that slow). It also looks really ugly on my Linux system. My vote is "get rid of it".. – JonasCz Feb 23 '16 at 16:16
  • @JonasCz: Indeed. I still think just a little timer would solve it for everyone. – Lightness Races in Orbit Feb 23 '16 at 16:21
  • Getting rid of it would solve it for everyone too. I don't see why the devs should spend their time messing with JS timers and such when the buttons already get disabled ? It would be a lot easier to just take that line out of the CSS, and the disabled buttons already make it clear that they're not clickable. – JonasCz Feb 23 '16 at 16:28
  • @JonasCz: That's ... a good point. :) – Lightness Races in Orbit Feb 23 '16 at 16:45
  • 1
    I find this use of the 'no symbol' (very mildly) insulting. I know I can't click those buttons -- they're clearly disabled -- so there's no reason to tell me again. Culturally the 'no symbol' is associated with authoritative proclamations of discouraged behaviors, either negative behaviors that shouldn't require prohibition (no smoking) or neutral behaviors that generally shouldn't be prohibited (no skateboarding). Both are annoying to be on the receiving end of. In this context it comes across as a bit too strong. – Jeffrey Bosboom Feb 24 '16 at 0:20
3

The thought here was that changing the cursor to not-allowed helps visually reinforce that the button cannot be used right now. Frameworks such as Bootstrap and Foundation both use cursor: not-allowed; for their buttons.

I did some further research to see if these frameworks did this to be standards-compliant, yet I couldn't find anything that suggested the one should change the cursor to not-allowed for buttons.

If the goal here is to visually reinforce that the button isn't active, we can do this by changing the cursor back to default and drastically changing the button colors. After discussing it as a team, this is the route we thought best, so the button code has been updated to not change the cursor to not-allowed for :disabled button states.

This change is now live on production.

  • So, status-completed then? – Shadow The Dragon Wizard Feb 25 '16 at 15:51
  • @ShadowWizard Oh right. ;) – Hynes Feb 25 '16 at 15:51
  • Cool - not wanting to test it, presumably that just means changing the Blue colour to a grey (and dimming the label text), as is typical in desktop UIs? – Lightness Races in Orbit Feb 25 '16 at 15:52
  • @PreferenceBean I just tested, looks like they now hide the button using animation or something similar. – Shadow The Dragon Wizard Feb 25 '16 at 15:54
  • @PreferenceBean Correct. They look like this now: i.stack.imgur.com/8RnVB.png – Hynes Feb 25 '16 at 15:56
  • 1
    Thankies Hynes. I like the fade-out :) Though it looks like the comment submission process is blocked on the animation completing which makes it take a little longer than it did before..... :P – Lightness Races in Orbit Feb 25 '16 at 16:07
8

I thought it may have been Chrome introducing a new default cursor for disabled input type="button"s, but it's definitely in the SE all.css:

input[type=button].btn-confirm._disabled {
    box-shadow: none !important;
    cursor: not-allowed !important;
    color: #fff;
    background: #bbd1d8;
    border-color: #aac6cf
}

I understand the use of the cursor, in principle, but perhaps there's a way to prevent the flicker. A 0.5s delay after clicking the button before adding to it the class _disabled, perhaps?

Alternatively you could keep it simple and just remove the cursor icon override altogether. Does it really serve a purpose? Disabling a button is the conventional and accepted way to indicate that it can't be clicked; throwing up a red "do not click!" on top of that almost seems a tad bossy.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .