Problem with TWebSignatureCapture not drawing at pointer position

The TWebSignatureCapture demo works without problems. But in my app, when drawing with the mouse pointer, the actual drawing is around 100 pixel on top of the pointer. In addition, I cannot click the embedded Clear button. When hovering over the button, the pointer does not change it's shape.

The TWebSignatureCapture is on a panel. The panel is on a form. The form is embedded in a DIV. All controls on the form are epAbsolute.

This is the definition of the TWebSignatureCapture in the .dfm:

object SignatureCapture: TWebSignatureCapture
      Left = 3
      Top = 668
      Width = 360
      Height = 243
      HeightPercent = 100.000000000000000000
      WidthPercent = 100.000000000000000000
      ChildOrder = 6
      TabOrder = 2
      ClearButton.Image.Data = {
      TextPosition.Line.Color = clGray
      TextPosition.LineVisible = False
      TextPosition.Position = ltpTopLeft
      Text = ''
      Pen.Color = clBlue

(using the original Clear button does not change anything)

In the index.html, the component is rendered like this:

<canvas id="TGuestRegForm_SignatureCapture122" zindex="0" height="243" width="360" 
tabindex="3" role="" style="position: absolute; height: 243px; width: 360px; overflow: hidden; 
outline: none; top: 668px; left: 3px; box-sizing: border-box; user-select: none; 
-webkit-tap-highlight-color: transparent; font-family: Arial; font-style: normal;
 font-size: 12pt; color: rgb(0, 0, 0); border-style: solid; border-width: 1px; 
border-color: rgb(192, 192, 192);"></canvas>

This screenshot of the running app shows the position of the mouse pointer when drawing the blue horizontal line

This happens with Firefox, Opera and Edge. Using Chrome, it's just the opposite: The drawing is below of the mouse pointer.

I tried to fiddle with the TWebSignatureCapture demo app to show the same behaviour in order to make the problem reproducable, but with no success. If it helps, I would send a PM with my project files.

Any ideas would be very much appreciated.

How exactly is this form embedded in a DIV?
It has most likely something to do with that and how is that DIV positioned in the document. Can you check what you do different from our demo under Demo\Basics\SignatureCapture where the form is also embedded in a HTML template DIV element.

I slightly changed the SignatureCapture demo to reflect the problem. (8.3 KB)

The main difference is that I load a "Main-Form" into "appcontent" with some stuff that should be visible on all subsequent forms. Then, when clicking the "Show Form" button, I load one of the subsequent forms (here: only one) into a DIV (here "Unit1Content") of the MainForm, which in this test case is the actual demo content.

    <div id="appcontent" class="appcontent">
        <img id="ImgHeader" src="" style="height: 80px;">
        <button type="BUTTON" id="BtnShowForm" style="width: 290px;height: 30px;">Show Form</button>
        <div id="Unit1Content">

This configuration produces the erroneous behavior of the Signature component. Now, if you go into devtools and one after the other delete "ImgHeader", then the <br> and finally the "BtnShowForm", the line drawn comes back closer and closer to the pointer. So, in short, for some reason the elements between "appcontent" and "Unit1Content" shift the drawing away from the pointer.

Hope that makes any sense. It's easier to just try it rather than describe it...

Another problem I just faced: If the capture is on a lengthy form very down below and the capture is (or can be) scrolled below the bottom of the browser window, then when scrolling back into the viewport the drawing is also no longer aligned with the pointer.

Dear Bruno,
would you mind having another look into this? I addef a modified demo some time ago that demonstrates the problem. See above.
Many thanks

I fixed your project. (7.9 KB)

Main fix is in the main form template:
<div id="Unit1Content" class="appcontent" style="height:400px">