Annotation for an entity is created with a big offset

[elyrank]

Describe the bug when creating an annotation - by using an entity or pickResult, the annotation is placed with an offset - it is above the selected object. this becomes much more problematic when zooming out, and the annotation no longer appears related to the actual object. I saw there is a property- surfaceOffset, but no matter which value I put there I did not see any difference.

tried to create an annotation using code from your examples:

       let i = 1; // Used to create unique Annotation IDs

        viewer.scene.input.on('mouseclicked', (coords) => {
            const pickRecord = viewer.scene.pick({
                canvasPos: coords,
                pickSurface: true, // <<------ This causes picking to find the intersection point on the entity
            });

            if (pickRecord) {
                annotations.createAnnotation({
                    id: `myAnnotationOnClick${i}`,
                    pickRecord,
                    occludable: false, // Optional, default is true
                    markerShown: true, // Optional, default is true
                    labelShown: false, // Optional, default is true
                    values: {
                        // HTML template values
                        title: `My annotation ${i}`,
                    },
                });

                i++;
            }
        });

To Reproduce Steps to reproduce the behavior:

1. have a building model
2. create annotation on an entity
3. zoom out
4. See error - annotation no longer appears on the selected entity,

Expected behavior the annotation should always be exactly on the entity, it should not be "floating in the air" above it and looks like it is not connected to anything

Screenshots

Desktop (please complete the following information):

• OS: [macOS]
• Browser [chrome]
• Version [2.3.1]

[mdnmdn]

Seems the problem is related to the placement of the canvas in the web page. In all the examples the canvas are fullscreen starting from the upper left corner, the problem arise using multiple containers and relative positioning in the html.

[mdnmdn]

the solution is here #149

[mdnmdn]

Duplicate of #149