Flickering selection area when clicking buttons multiple times #54

Closed
andrejs opened this Issue Dec 14, 2012 · 9 comments

Comments

Projects
None yet
4 participants

andrejs commented Dec 14, 2012

While scrolling chart by clicking arrow buttons, repeating this action couple of times per second or faster, there is undesired effect of text selection, as seen here:

multiclick

At least it appears so in Chrome. To fix this, I searched for <span role="button" ... /> and replaced with <button ... /> (20 replacements in the latest version). I tested it locally and seems that it works in Chrome 23 without the flickering selection effect.

Owner

taitems commented Dec 16, 2012

Yeah cool, I'll look into it. For future reference user-select: none; might also help out?

andrejs commented Dec 18, 2012

Thanks, that might help too, however this property isn't in standards yet. I tried user-select: none; and it didn't work in Chrome. Changed to -webkit-user-select: none; and it worked fine.

Googled more info about user-select here: http://css-tricks.com/almanac/properties/u/user-select/

Owner

taitems commented Dec 18, 2012

Heh, if I had a dollar for every vendor prefix I used I would be a rich man
indeed. The code base has much bigger problems than that ;)

Sent from my iPhone

On 18/12/2012, at 7:49 PM, Andrejs Semovs notifications@github.com wrote:

Thanks, that might help too, however this property isn't in standards yet.
I tried user-select: none; and it didn't work in Chrome. I tried
-webkit-user-select:
none; and it worked fine.

Googled more info about user-select here:
http://css-tricks.com/almanac/properties/u/user-select/


Reply to this email directly or view it on
GitHubhttps://github.com/taitems/jQuery.Gantt/issues/54#issuecomment-11478161.

mleden commented Feb 26, 2013

Upvote for this fix to be merged in a new build.

Thx,
-Mark

Collaborator

usmonster commented Sep 5, 2013

I agree that the best fix would be a simple find-replace of <span role="button" ... /> with <button type="button" ... />. Pull request, anyone? @andrejs ?

andrejs commented Sep 21, 2013

Yes, I could fork, replace to <button type="button" ... /> and make pull request sometime next week.

Collaborator

usmonster commented Sep 23, 2013

That would be great, thanks!

Collaborator

usmonster commented Nov 3, 2013

Seems the selection-on-rapid-button-clicking issue specifically should be fixed since #101 was merged into master, though did we want to keep this open as a reminder to maybe use [-vendor-]user-select as a solution to the more general problem?

(Just to recap: The issue before was that buttons were represented by spans, which was semantically incorrect, and so the browser thought selecting button text and surrounding elements on double-click was fine. The remaining, though less common, issue is that most of the elements of the Gantt should probably not be selectable/highlightable at all.. Discuss?)

Collaborator

usmonster commented May 13, 2014

Closing because the original issue has been fixed and there's been no further discussion about using user-select in the CSS, which is a separate, more general (though minor) issue anyway.

@usmonster usmonster closed this May 13, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment