Editor - Image Selection Box Not Aligned with Scroll Position

[Taras]

Guys, I have following problem regrading image selection in Kendo wysiwyg editor:

When Scrolling through the WYSIWYG editor the selection for images does not follow the scroll for the editor.
Steps to Reproduce
1) Open WYSIWYG editor
2) Add images and exta lines allowing for scrolling 
3) Scroll down editor a little
4) Select image

As results selection box for re-sizing is not consistent with image

I have most recent version of Kendo: 2017.3.1018

Expected result for me - selecting image always lines up resizing box with image

How I can solve this issue and get expected result? If you need screenshots or video capture to show this issue please let me know!

Thanks for your time!

[Ivan Danchev]

Hello Taras,

Here's a screencast that shows how the image resize box looks like at my end when scrolling the page and selecting the image. I did not notice any misalignment. The demo used to record the screencast.
If there are any additional steps that we need to follow in order to reproduce the issue, could you please share them?

Regards,
Ivan Danchev
Progress Telerik

[Taras]

Ivan,

This is screencast - https://www.screencast.com/t/YxJSBOtNt how to replicate this issue. Please look, I used same steps to get it as described in first post

Thanks!

[Ivan Danchev]

Hello Taras,

Thank you for posting a screencast. What it shows is browser behavior that Kendo UI does not have control over. If you follow the same steps in this dojo example, in which there are no Kendo UI widgets initialized, but a simple div element with contenteditable="true" the same behavior with regard to how the image resize handles are displayed on scrolling is exhibited.

Regards,
Ivan Danchev
Progress Telerik

[Taras]

Ivan,

I do not think that's any browser behavior. As I see "selecting region" is fully under control of Kendo API. Look screenshot I made for you.

As you can see from screenshot Kendo Editor injects to DOM special <span> elements to draw selection region for image:

<span data-guid="82325f7a-33f1-1ce8-ef19-c818e515b749" class="img-resize-selector" style="margin:10px;position:absolute;top:1163px;left:380.796875px;border:solid 2px red;width:6px;height:6px;cursor:se-resize;z-index:1;"></span>

<span data-guid="82325f7a-33f1-1ce8-ef19-c818e515b749" class="img-resize-region region-top-right" style="position:absolute;top:873px;left:58.796875px;border:dashed 1px grey;width:332px;height:0px;"></span>

<span data-guid="82325f7a-33f1-1ce8-ef19-c818e515b749" class="img-resize-region region-top-down" style="position:absolute;top:873px;left:58.796875px;border:dashed 1px grey;width:0px;height:300px;"></span>

<span data-guid="82325f7a-33f1-1ce8-ef19-c818e515b749" class="img-resize-region region-right-down" style="position:absolute;top:873px;left:390.796875px;border:dashed 1px grey;width:0px;height:300px;"></span>

<span data-guid="82325f7a-33f1-1ce8-ef19-c818e515b749" class="img-resize-region region-down-left" style="position:absolute;top:1173px;left:58.796875px;border:dashed 1px grey;width:332px;height:0px;"></span>

Spans have position which setup in absolute values for screen. And that position must be re-evaluated on the each image click actually to get correct position of selecting region if parent container size been changed.

Please let me know if you need more details from my side.

 

[Ivan Danchev]

Hello Taras,

At my end I don't see such span elements when inspecting the Editor and the image that is resized within it. Here's a dojo example. Could you modify it accordingly so that the HTML structure shown in the screenshot is replicated and link the example back for further review?

Regards,
Ivan Danchev
Progress Telerik