Top right part of BrowserView in frameless BrowserWindow is not clickable

[quanglam2807]

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 an issue that matches the one I want to file, without success.

Issue Details

Top right part of BrowserView in frameless BrowserWindow is not clickable

• Electron Version: 11.1.1 (broken with >= 11.0.4)
• Operating System: Windows & Linux (tested on Windows 10 20H2, reported by a Linux Mint user)
• Last Known Working Electron version: 11.0.3

Expected Behavior

Buttons in BrowserView should be clickable.

Actual Behavior

Buttons in BrowserView are not clickable.

To Reproduce

Replace main.js in electron-quick-start with the following code.

// Modules to control application life and create native browser window
const {app, BrowserWindow, BrowserView} = require('electron')
const path = require('path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  const view = new BrowserView({})
  view.webContents.loadURL('https://discordapp.com/login')
  mainWindow.setBrowserView(view)
  view.setBounds({
    x: 0,
    y: 0,
    height: 600,
    width: 800,
  })
  view.setAutoResize({ width: true, height: true })


  // Open the DevTools.
  view.webContents.openDevTools({ mode: 'detach' })
}


// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()
  
  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

Login with your Discord account. The top right part of the UI won't be clickable (see screenshot).

Downgrade to Electron 11.0.3 and it will work normally. Upgrade to Electron 11.0.4 and it will break.

Screenshots

Additional Information

Likely to be regression of #26738
@codebytere

[quanglam2807]

Also, it seems like this only happens with certain websites. I attempted to create a simple HTML page with some buttons and they were all clickable. But somehow, this bug occurs with Microsoft Teams & Discord.

Refs:
webcatalog/webcatalog-legacy#1254
webcatalog/webcatalog-legacy#1237

[codebytere]

It's most likely related to this #26738 yeah

[codebytere]

hey @quanglam2807 - turned out to be a pretty simple fix, PR is up at #27143