1361012 - div content editable , cursor caret appear in wrong position if image is resized

Status: UNCONFIRMED

(Core :: DOM: Editor, defect, P5)

Description

[opensource.publicocean0]

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

Steps to reproduce:

if i use for example a canvas where image is resized 
cursor appear in wrong position (yet not resized) 

	     	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, sourceX,sourceY,64,64,0,0,12,12);
									};
									imageObj.src = "emoji.png";


Actual results:

wrong cursor position

Comment 1

[opensource.publicocean0]

if i put a cropped image there is a problem with cursor. 
Using css there is problem
using js there is same problem.
Actually there is just a way working. To convert canvas in Image component. Not always it posssible anyway.

Comment 2

[Makoto Kato [:m_kato]]

opensource.publicocean0, could you create a sample to reproduce this since your comment #0 doesn't use contenteditable.

Comment 3

[opensource.publicocean0]

sorry but in this period i m following too many tasks i can t realize again a example for reproducing the problem. Here too many deadlines :( 
Anyway if you put the result canvas in the script above in a div contenteditable you are in the same condition. 
I remember for realizing this task it was a fight ... because i ddint find a way for resizing a image in the div contenteditable keeping the cursor in the right place. 

Finally tired to fight i decided to changed solution.
The image when is resized keep the cursor position of the original image. 

I tried with js, with css ... no way.

Unique way working magically was using zoom attribute in css but it is not compatible with all browsers. 
for solving the problem programatically you resize the image in js and then you convert in blob ... in this way the image created is new .... no reference to the original image ... and all work. But is you resize and put in directly ... the cursor dont work correctly