Annotation layer is "drifting" on the layer

[EloiGattet]

Here is an example, the annotation tool is not matching the position of the cursor and when we zoom the annotation layer zooms a bit slower of faster resulting in a drifting. The movement and offset is unnoticable on the top left corner of the image and is larger on the bottom right corner

https://user-images.githubusercontent.com/91476356/177484579-dd044b86-bbc8-4ea5-bc45-842bf610559e.mov

here is the code for my layers:

    const lime = new OpenLIME.Viewer('.openlime');
    OpenLIME.Skin.setUrl('/assets/js/Openlime/skin.svg');

    lime.camera.bounded = true; //permet de limiter le déplacement de la caméra à l'image.

    //On ajoute les 2 calques : RTI et image.

    let layer0 = new OpenLIME.Layer({
        label: 'RTI',
        layout: 'itarzoom',
        type:'rti',
         // asset url.
        url: '/assets/'+(this.rti_id)+'/info.json',
        normals: false
    });

    let layer1 = new OpenLIME.Layer({
        label: 'Image',
        layout: 'tarzoom',  //VENIR RECUPERER this.layout
        type:'image',
        url: '/assets/'+(this.rti_id)+'/image.tzi', //this.rti_id
        normals: false
    });

        const classParam = {
          '': { stroke: '#000', label: '' },
          'class4': { stroke: '#00FF00', label: 'Vert' },
          'class5': { stroke: '#ff0000', label: 'Rouge' },
          'class1': { stroke: '#FFFF00', label: 'Jaune' },
          'class2': { stroke: '#0000FF', label: 'Bleu' },
          'class3': { stroke: '#000000', label: 'Noir' },
          'class6': { stroke: '#ffffff', label: 'Blanc' },
        };

        let aOptions = {
            label: 'Annotations',
            layout: layer0.layout,
            type: 'svg_annotations',
            style: `
            .openlime-annotation { pointer-events:stroke; opacity: 0.7; }
            .openlime-annotation:hover { cursor:pointer; opacity: 1.0; }

            :focus { fill:yellow; }
            path { fill:none; stroke-width:2; stroke:#000; vector-effect:non-scaling-stroke; pointer-events:all; }
            path:hover { cursor:pointer; stroke:#f00; }
            .selected { stroke-width:3; }
            `,
            annotations: '/assets/js/annotations/annotations_crud.php?idannojson='+idannojson,
        }

        // Create an annotation layer and add it to the canvans
        const anno = new OpenLIME.Layer(aOptions);
        lime.addLayer('RTI', layer0);
        lime.addLayer('Image', layer1);
        lime.addLayer('anno', anno);

[JulesNd13]

Solved : It was a css problem ( inside skin.css file ) Never change canvas width and height values, always leave it at 100%

Dont :

canvas {
    width: 98%;
    height: 98%;
}

do :

canvas {
    width: 100%;
    height: 100%;
}