Skip to content

Ace Editor Zoom issue with the Oculus Browser #123

@TiborUdvari

Description

@TiborUdvari

In the Meta Quest Browser, the Ace Editor in P5 LIVE triggers an unwanted zoom when the text area gets focus. This happens because Ace uses a hidden <textarea> that's only 1px by 1px. The browser sees it as too small for input and zooms in aggressively.

Temporary Fix
Setting the size of the textarea via CSS avoids the zoom. Adding code I injected here for reference.

Array.from(document.querySelectorAll("textarea")).forEach((el) => {
  el.style.fontSize = "32px";
  el.style.height = "32px";
  el.style.minHeight = "32px";
  el.style.minWidth = "100px";
  el.style.width = "100px";
  el.style.opacity = "1";
});

This resolves the issue in my case without causing any problems so far.

I want to open a PR to add this fix directly to P5 LIVE. It’s not something I can patch downstream (like in p5.xr) because the zoom already happens when the editor loads. As long as it doesn’t cause issues elsewhere, can we include this in the main project?

Untitled.mov

Detailed bug report on Ace Editor Repo:
ajaxorg/ace#5841

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions