Browser zoom 80% causes the click to miss its target

[andersskeiefocus]

Describe the bug 📝

I noticed that if you zoom out to say 80% on the browser the click upon the model does not hit correctly.

This version did not have this problem
"@thatopen/components": "^3.3.0",
"@thatopen/components-front": "^3.3.0",
"@thatopen/fragments": "^3.3.6",
"@thatopen/ui": "^3.3.0",
"@thatopen/ui-obc": "^3.3.0",

but in this version
"@thatopen/components": "3.4.5",
"@thatopen/components-front": "3.4.3",
"@thatopen/fragments": "3.4.5",
"@thatopen/ui": "3.4.1",
"@thatopen/ui-obc": "3.4.2",
it is a problem.

I worked around it by

    const simpleRenderer = new OBC.SimpleRenderer(components, containerElement);
    this.applyPixelRatio(simpleRenderer);
    this.watchPixelRatioChanges(simpleRenderer);
    world.renderer = simpleRenderer;

  private applyPixelRatio(simpleRenderer: OBC.SimpleRenderer): void {
    const renderer = simpleRenderer.three;
    if (!renderer?.setPixelRatio) return;
    const dpr = Math.max(1, Math.min(window.devicePixelRatio || 1, 2));
    if (renderer.getPixelRatio() !== dpr) {
      renderer.setPixelRatio(dpr);
    }
  }

  private watchPixelRatioChanges(simpleRenderer: OBC.SimpleRenderer): void {
    if (this._dprMediaQuery) return;
    const handler = () => this.handlePixelRatioChange(simpleRenderer);
    const attach = () => {
      const dpr = window.devicePixelRatio || 1;
      const mql = window.matchMedia(`(resolution: ${dpr}dppx)`);
      this._dprMediaQuery = mql;
      this._dprMediaQueryHandler = () => {
        handler();
        attach();
      };
      mql.addEventListener('change', this._dprMediaQueryHandler);
    };
    attach();
  }

Ask if any questions :-)

Reproduction ▶️

No response

Steps to reproduce 🔢

No response

System Info 💻

chrome
_"@thatopen/components": "3.4.5",
"@thatopen/components-front": "3.4.3",
"@thatopen/fragments": "3.4.5",
"@thatopen/ui": "3.4.1",
"@thatopen/ui-obc": "3.4.2",_

Used Package Manager 📦

npm

Error Trace/Logs 📃

No response

Validations ✅

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a repository issue and not a framework-specific issue. For example, if it's a THREE.js related bug, it should likely be reported to mrdoob/threejs instead.
• Check that this is a concrete bug. For Q&A join our Community.
• The provided reproduction is a minimal reproducible example of the bug.