Invalid position of the viewport visualization in navigator

I was trying to implement viewport tracking, and noticed my tracked positions are off. Further inspection led me to realize the OSD’s implementation does not display the viewport correctly.

I shouldn’t have modified the navigator in any way that would cause this, but I am not 100% sure.

What I am doing:

        const size = 250;
        this.record = document.createElement("canvas");

        const homeBounds = VIEWER.viewport.getHomeBounds();
        homeBounds.width += 2*homeBounds.x; //consider setting 1 since it is computed to be 1 anyway
        homeBounds.height += 2*homeBounds.y;
        homeBounds.x = 0;
        homeBounds.y = 0;

        const w = size * homeBounds.width, h = size * homeBounds.height;
        this.record.width = w;
        this.record.height = h;
        this.recordCtx = this.record.getContext('2d');
        this.recordCtx.globalCompositeOperation = "lighten";

        ....

        VIEWER.addHandler("update-viewport", e => {
                const viewport = e.eventSource.viewport;

                ....

                const bounds = viewport.getBoundsNoRotate(true);
                _this.recordCtx.fillRect(size*bounds.x, size*bounds.y, size*bounds.width, size*bounds.height);
        });

(tissue blurred) If you look closer you can see that while the whole bottom part of the tissue is visible, the viewport position indicator is off. Note that the display is cut and the OSD renders behind the menu too, the reason the rectangle is so wide.

I tried loading just a single TiledImage with the same result.

What OSD is doing (for reference):

            bounds      = viewport.getBoundsNoRotate(true);
            topleft     = this.viewport.pixelFromPointNoRotate(bounds.getTopLeft(), false);
            bottomright = this.viewport.pixelFromPointNoRotate(bounds.getBottomRight(), false)
                .minus( this.totalBorderWidths );

            //update style for navigator-box
            var style = this.displayRegion.style;
            style.display = this.world.getItemCount() ? 'block' : 'none';

            style.top    = Math.round( topleft.y ) + 'px';
            style.left   = Math.round( topleft.x ) + 'px';

            var width = Math.abs( topleft.x - bottomright.x );
            var height = Math.abs( topleft.y - bottomright.y );
            // make sure width and height are non-negative so IE doesn't throw
            style.width  = Math.round( Math.max( width, 0 ) ) + 'px';
            style.height = Math.round( Math.max( height, 0 ) ) + 'px';

Any ideas? Thanks.

[pearcetm]

Aha! In your example, I disabled box-sizing: border-box in the CSS for the navigator panel (can be found with selector #panel-navigator-displayregion.displayregion (among others) ) and the bottom right positioning seems much better.

[pearcetm]

I feel like it might be worth considering how to make the indicator rectangle robust to external CSS like this. I can’t imagine why it would be beneficial for a user to intentionally apply a different box-sizing model that makes it inaccurate, and it is highly likely to happen by accident like it did to you.

@iangilman Thoughts? Perhaps inline CSS defined on the element itself could be used to override any such changes made by an external stylesheet…