Issue metadata
Sign in to add a comment
|
NEEDS_FEEDBACK div contenteditable : cursor blinking not appear when inside node is a canvas
Reported by
cristian...@gmail.com,
May 1 2017
|
||||||||||||||||||||||
Issue description
UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
Steps to reproduce the problem:
var canvas = document.createElement('canvas');
canvas.width = 64;
canvas.height = 64;
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.setAttribute('crossOrigin', 'anonymous');
imageObj.onload = function() {
// draw cropped image emoji_
//var v=parseInt(id.substring(6));
var v=0;
var row=Math.floor(v/41);
var col=v % 41;
var sourceX = row*64;
var sourceY = col*64;
var sourceWidth = 64;
var sourceHeight = 64;
var destWidth = editSize;
var destHeight = editSize;
var destX = 0;
var destY =0;
context.drawImage(imageObj, 0,0);
};
imageObj.src = "emoji.png";
this.toHTML=function(){
return canvas;
return "<img width='12px' height='12px' src='"+canvas.toDataURL("image/png",1)+"' >";
//return "<div ><img width='12px' height='12px' src='/home/cristian/temp/img/chat-js/emoticons/0.png' ></div>";
// return canvas;
}
What is the expected behavior?
same problem with a nested div or image when the overflow part of image is hidden
What went wrong?
no caret
Did this work before? N/A
Chrome version: 55.0.2883.87 Channel: n/a
OS Version:
Flash Version: Shockwave Flash 25.0 r0
,
May 2 2017
Could you make the example as a live demo (e.g. jsbin.com)? Also, if you could attach a screenshot or two to compare what's expected and actual, it makes us easier to understand the problem.
,
May 2 2017
Thank you for providing more feedback. Adding requester "kochi@chromium.org" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
May 8 2017
Hmm, the comment is deleted - could you put your demo on jsbin.com so that anyone in charge of fixing the bug can reproduce your problem?
,
May 8 2017
Okay, I pasted the code in the original description in jsbin. http://jsbin.com/xakipeqive/1/edit?html,js,output Looks like an external "emoji.png" is also needed to run the code. I still don't understand what the code is trying (esp. in this.toHTML function tries to return something, some of them are commented out) and I have no idea why the canvas in the demo code has something to do with contenteditable.
,
May 8 2017
the bug dont depend by specific image. When you create a canvas dinamically and put inside div after you resized a image there is a problem with cursor the code take a part of a image (crop), resize it (smaller) and put it inside a div. The code above is a ablock of a long and complex library ... it is not important the meaning of this.toHTML here.
,
May 8 2017
Thank you for providing more feedback. Adding requester "kochi@chromium.org" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
May 8 2017
i have the same problem if i do the operation using css (transform:scale) .... cursor problem. Using zoom instead the result is ok .... but zoom is not supported by all browser (for example firefox). I resolved the bug converting canvas to a image ... in this way the cursor appairs corretly
,
May 8 2017
Returning to canvas solution ...
pratically using canvas.toDataURL("image/png",1) cursor is ok
using canvas cursor is not ok
,
May 8 2017
Thanks for the clarification. Your comment 7 helps understanding the problem. But still not clear to me. Now my understanding is that "this.toHTML()" function tried to work around the issue, by not returning the canvas element itself (the first "return canvas;" line), but returning the <img> converted from the canvas (the second "return <img width='12px'..." line). The problem you are seeing is "Blinking cursor does not appear" when the canvas is used? Is a canvas in general enough to reproduce the issue, or you need to do some manipulation (like in the code above) to reproduce the issue? You have several problem descriptions so far, which are confusing. - "same problem with a nested div or image when the overflow part of image is hidden" - "no caret" - "if i put a cropped image there is a problem with cursor." - "Using css there is problem" - "using js there is same problem" From these statements I am not sure canvas is required to reproduce the issue or some divs would do. If they show the same symptom of the problem, please provide one way to reproduce the issue. There may be multiple issues involved, but issues can be fixed one by one. So we need minimal steps to reproduce the problem with actual code runnable on Chrome, and clear description of what is the expected behavior (comparison with other browsers is a good way) and what went wrong on Chrome. Please do not try to invent workaround for the problem you are seeing here, but provide enough information for Chromium developers to understand the problem and work on fixing it.
,
May 8 2017
in the code sent i tried different attempts ... the problems is when "return canvas" The canvas gives a bug inside the div when the canvas reproduces a image as defined above (crop+resized, probably is sufficient resized)
,
May 8 2017
you have to use before pratically context.drawImage(imageObj, x1,x2,y1,y2); (in the code above i removed y1,y2 ... but was one of tons of attempts.... i remember surelly using y1,y2 the bug appairs) Anyway in my investigation the problem seams a general browser behaviour when you resize the image (using css or canvas). In fact for resolving the problem i converted the resized canvas in a static image
,
May 8 2017
Could you provide a minimal set of files to reproduce your issue? (e.g. HTML + image file in a .zip file and attach to a comment)
,
May 8 2017
in this moment i have a tons of code to develop... my boss is over my head. It will be a thing not so fast
,
May 9 2017
As #c14, we need to know re-produce a bug to fix. Please provide a HTML for re-produce this issue. Thanks in advance!
,
May 22 2017
The NextAction date has arrived: 2017-05-22
,
May 23 2017
Feedback timeout. Feel free to reopen this once requested reproduction case is ready. |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by cristian...@gmail.com
, May 1 2017