-
Notifications
You must be signed in to change notification settings - Fork 10.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Non/less flashing text layer during selection. #6591
Conversation
This makes text selection much more smooth in my opinion. Nice work! |
Which steps should I follow to observe the undesiredflashing behavior in Chrome? I've tried to select text and it is much better than before, but I don't see any other issues (perhaps my steps are wrong? E.g. I select the title and move the mouse downwards, before the change only the first letter is selected, after this commit multiple lines are selected). |
STR:
(Without fix) notice flashing of the text at the top and left. |
We still have flashing of the bottom-right text on other browsers but Firefox. |
Nice find. Is this |
Based on https://developer.mozilla.org/en-US/docs/Web/CSS/user-select it is not a standard, so it will be hard to find a documented behavior. Looks like FF just ignores any selection action, but other browsers are trying to work around of non-selectable element. |
I found an issue with your patch. If you start with the selection in the blank space between "Just-in-Time" and the authors, then move the mouse down, then:
In both Chrome and Firefox (without patch), the above action results in a text selection starting at the top of the page and ending at the location of the cursor. So, the behavior for a selection that starts inside text is better, but the result for a selection that starts outside the range is worse. |
So question: shall I keep patch as is, remove user-select or close entire PR? Voting is opened :) |
Is it an option (= no performance loss and no negative side effects) to insert the element only when the user clicks on a text layer item (via a mousedown event)? That would probably fix Firefox's bug. Even without the additional fixes, I'm currently in favor of merging the patch because it has better results for the common case (start a selection in the text and move elsewhere). |
To summarize what I wrote on IRC:
|
/botio-windows preview How about now? Used spin on Rob's idea to insert div only when mouse clicked. |
div.addEventListener('mouseup', function (e) { | ||
var end = div.querySelector('.endOfContent'); | ||
if (!end) { | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Missing return;
before }
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed. Thanks
The last version seems to address all of my comments from #6591 (comment), nicely done! |
|
||
.textLayer .endOfContent.active { | ||
top: 0px; | ||
bottom: 0px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this line actually necessary, since it shouldn't change anything given that bottom: 0px;
was already set above?
/botio-linux preview |
From: Bot.io (Linux)ReceivedCommand cmd_preview from @timvandermeij received. Current queue size: 0 Live output at: http://107.21.233.14:8877/5cf13a1f0fe544c/output.txt |
From: Bot.io (Linux)SuccessFull output at http://107.21.233.14:8877/5cf13a1f0fe544c/output.txt Total script time: 0.83 mins Published |
* This reduces flickering of the content if mouse slowly dragged down/up. | ||
* @private | ||
*/ | ||
_bindMouse: function () { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Rename anonymous function to TextLayerBuilder_bindMouse
.
In Chrome: if you press the mouse at any blank space and move the pointer upwards, then the whole document is selected. Moving by just a few pixels is already enough to trigger this unwanted behavior, so it can already happen if the user just wants to click on the document. The new |
@Rob--W Most of the logic in _bindMouse for other browsers, especially "set top" part. I cannot reproduce behavior you described above on Chrome for Mac OSX -- in fact the "set top" part suppose to help to remove that. |
@yurydelendik I can trigger the bug at 100% zoom in Chrome 46 (Linux, OS X and Windows). |
Sorry it's actually fixing the case when selection started from text. Not sure how to address your issue yet -- by removing to above you shall get the same effect but when you are moving down (try http://107.21.233.14:8877/5ce984c56a4c940/web/viewer.html, click empty space and move down) |
@yurydelendik The difference between the previous version and the last version is that in the previous version you had to move over text, whereas in the last version just moving the cursor by a few pixels is already enough. When I click on the blank space as a user (e.g. to focus the window?), then it is very realistic that the mouse moves by a few pixels. When that happens I don't want the whole document to be selected. |
@Rob--W okay, suppressed this logic when selection starts at empty space. Is this better? /botio-windows preview |
From: Bot.io (Windows)ReceivedCommand cmd_preview from @yurydelendik received. Current queue size: 0 Live output at: http://107.22.172.223:8877/58bd91f15157c48/output.txt |
From: Bot.io (Windows)SuccessFull output at http://107.22.172.223:8877/58bd91f15157c48/output.txt Total script time: 1.32 mins Published |
👍 ! |
84c3db0
to
0951f43
Compare
Non/less flashing text layer during selection.
Looks good, thanks for the patch! |
If we place entire-text-layer div after the content, it will make selection flash in different way: bottom-right part instead of left-top.
-moz-user-select
fixes flashing for Firefox. (-webkit-user-select
has no effect -- just added it for company).