[Bug]: Area where traffic lights is rendered does not receive click events when app is fullscreened with titlebar hidden on macOS

[sergeichestakov]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for a bug report that matches the one I want to file, without success.

Electron Version

26.1.0

What operating system are you using?

macOS

Operating System Version

macOS Ventura 13.5.2

What arch are you using?

arm64 (including Apple Silicon)

Last Known Working Electron version

N/A

Expected Behavior

Hi there! Apologies if there is already an opened issue for this, I tried to look in the repo but could not find anything relevant.

As the title suggests, we're currently experiencing an issue in our Mac app, which uses a hidden titlebar and therefore renders the traffic lights inline in our app's header alongside clickable elements such as buttons and popovers, where the leftmost buttons are no longer clickable when the app is maximized.

In debugging this, I realized that those buttons (which we have set up to replace the position of where the traffic lights were in the maximized state) do not receive click events at all (e.g. I can't select them from the Chromium inspector and setting a debugger for onclick events in the DOM yields nothing when I click that region.

Other relevant information here is that our header which renders these buttons has -webkit-app-region: drag set (so it does not receive DOM click events as expected) but each individual button has -webkit-app-region: no-drag set to allow them to be clickable and otherwise work just fine when the app is not maximized and the buttons have not been rendered where the traffic lights were in the un-maximized state.

Actual Behavior

As described above, the relevant two leftmost buttons in our draggable header (which have no-drag set) are clickable when rendered next to the traffic lights while the app is not maximized but no longer receive click events when they replace the traffic lights at the edge of the window when it is maximized.

See demo gif below:

Testcase Gist URL

https://gist.github.com/sergeichestakov/c84835f4d80182744b99e837268edc7c

Additional Information

Worth noting that we can only reproduce this so far in macOS Ventura (on an M1 Mac). We also tried macOS Big Sur (on an x86 Mac) but this bug does not reproduce there.

Also relevant, we initialize the BrowserWindow with the following options:

  const window = new BrowserWindow({
    webPreferences: {
      preload,
      additionalArguments: [
        `--app-version=${app.getVersion()}`,
        `--platform=${process.platform}`,
      ],
      webviewTag: true,
    },
    title,
    icon,
    minWidth: 720,
    minHeight: 480,
    backgroundColor,
    autoHideMenuBar: true,
    // on macOS:
    titleBarStyle: 'hidden',
    titleBarOverlay: { height: 48 },
    trafficLightPosition: { x: 20, y: 16 },
  });

[electron-issue-triage]

Hello @sergeichestakov. Thanks for reporting this and helping to make Electron better!

Would it be possible for you to make a standalone testcase with only the code necessary to reproduce the issue? For example, Electron Fiddle is a great tool for making small test cases and makes it easy to publish your test case to a gist that Electron maintainers can use.

Stand-alone test cases make fixing issues go more smoothly: it ensure everyone's looking at the same issue, it removes all unnecessary variables from the equation, and it can also provide the basis for automated regression tests.

Now adding the blocked/need-repro Needs a test case to reproduce the bug label for this reason. After you make a test case, please link to it in a followup comment. This issue will be closed in 10 days if the above is not addressed.

[sergeichestakov]

thanks! yeah I realized this would be much harder to triage / debug without a repro. I can put one together later this week or weekend

[sergeichestakov]

update: I put together a minimal repro with Electron Fiddle today in this gist (also updated PR description).

See demo:

[jtbandes]

Thanks for fixing this! Just found the same issue in our app and glad to see it's already been fixed 😄

I was using titleBarOverlay: {} on macOS (using other values on other platforms) so I was able to work around the issue for now by setting titleBarOverlay: undefined instead.

[jtbandes]

Also worth mentioning that I noticed that the problem did not occur whenever the dev tools were open.