Open Bug 1816320 Opened 2 years ago Updated 5 months ago

[macOS] Invisible one-pixel border on the right hand side that breaks fitts law (can't click items in bottom right hand corner by moving mouse to the edge of the screen/display)

Categories

(Core :: DOM: Core & HTML, defect)

Product:
Core
Component:
DOM: Core & HTML
Version:
Firefox 109
Platform:
ARM64
macOS
Type:
defect

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: 5silentrain, Unassigned)

Details

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/109.0

Steps to reproduce:

  1. Open any YouTube video
  2. Go to full screen mode by double-clicking on the video or by pressing the F key on your keyboard
  3. Move the mouse cursor to the lower right corner and click there LMB

Actual results:

Nothing happens!

Expected results:

I have to exit full screen mode by simply moving the mouse cursor to the lower right corner and clicking there. This is very handy if you need to quickly exit (literally blindly) from full-screen mode using only the mouse. A long time ago this problem was present in Firefox from under Windows, but then it was fixed. Now I am facing the same problem, but from under macOS. By the way, Chrome and Safari do not have this issue.

There is at least one other use case where this invisible one-pixel border is a big problem:

  1. Open any site, for example this one: https://html5test.com/
  2. Switch to full screen mode by pressing the keyboard shortcut Control + Command + F or Command + Shift + F.
  3. We rest the mouse cursor on the right border of the screen (where we have the scrollbar) and, holding the LMB, try to move the scrollbar. Nothing works out for us, because again this invisible one-pixel frame at the screen border interferes.

And again, this problem is not present in Chrome or Safari. Would like consistency with other web browsers.

OS: Unspecified → macOS
Hardware: Unspecified → x86_64
Summary: Invisible one-pixel border that prevents normal use of full screen mode in Firefox → Invisible one-pixel border that prevents normal use of full screen mode in Firefox (macOS)

The Bugbug bot thinks this bug should belong to the 'Core::Audio/Video: Playback' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Component: Untriaged → Audio/Video: Playback
Product: Firefox → Core

If the idea is to quickly hide YouTube's semi-transparent interface by hovering the mouse over the right edge of the screen, that doesn't work very well on macOS. Simply because the cursor still remains visible, even when it is close to the right edge of the screen.

Hi 5silentrain, Thanks for the report. Unfortunately, I cannot reproduce this issue on my MacBook pro. Can you try to reproduce this in Troubleshoot Mode or a fresh profile? This problem may be caused by some add-ons. (In reply to 5silentrain from comment #0)

Steps to reproduce:

  1. Move the mouse cursor to the lower right corner and click there LMB

Does the lower right corner mean the exit-full-screen button on Youtube's UI, which does the same job as pressing the F key?

I have to exit full screen mode by simply moving the mouse cursor to the lower right corner and clicking there. This is very handy if you need to quickly exit (literally blindly) from full-screen mode using only the mouse. A long time ago this problem was present in Firefox from under Windows, but then it was fixed.

Do you remember what bug number that bug is? It might be helpful for us to identify which component causes the issue.

Flags: needinfo?(5silentrain)

Are you sure you rested the mouse cursor in the lower right corner? If you make a mistake by 1 pixel, you won't be able to detect the bug.

Hi 5silentrain, Thanks for the report. Unfortunately, I cannot reproduce this issue on my MacBook pro. Can you try to reproduce this in Troubleshoot Mode or a fresh profile? This problem may be caused by some add-ons. (In reply to 5silentrain from comment #0)

I already tried. It doesn't help.

Does the lower right corner mean the exit-full-screen button on Youtube's UI, which does the same job as pressing the F key?

Yes!
I have a Mac mini with an M1 chip connected to an LG 27UP650-W monitor with 4K resolution (3840×2160) . Scaling in macOS is set to Full HD (1920×1080). That is, the resolution is divided in half. Maybe this is the issue?
Please check on a Mac with an M1 chip and a resolution that can be divided by two.

Once again, Chrome and Safari don't have this problem and the bottom right corner allows you to click the Exit Full Screen button by pressing the left mouse button.

Do you remember what bug number that bug is? It might be helpful for us to identify which component causes the issue.

No, I don't know the number of this bug. But it is unlikely that this problem is somehow related to what was in Windows. Still, macOS is a completely different operating system, even despite the cross-platform nature of Firefox.

Flags: needinfo?(5silentrain)
Hardware: x86_64 → ARM64

Can you ask someone else to check this bug?

Are you sure you rested the mouse cursor in the lower right corner? If you make a mistake by 1 pixel, you won't be able to detect the bug.

I advise you to use a regular mouse for this, and not a MacBook trackpad. And preferably not a Magic Mouse, but an ordinary one with a scroll wheel (and even better a gaming one 😉).

(In reply to 5silentrain from comment #6)

a regular mouse for this, and not a MacBook trackpad. And preferably not a Magic Mouse, but an ordinary one with a scroll wheel

I still cannot reproduce this.

(In reply to 5silentrain from comment #4)

No, I don't know the number of this bug. But it is unlikely that this problem is somehow related to what was in Windows. Still, macOS is a completely different operating system, even despite the cross-platform nature of Firefox.

The UI implementation is platform-independent.

It seems the problem is more like a video control bar issue or Youtube UI issue (if the problem only occurs in youtube) rather than a playback issue since the video and audio decoders work normally. I am going to move this to video control to see if anyone can judge the problem better.

Component: Audio/Video: Playback → Video/Audio Controls
Product: Core → Toolkit

There is at least one other use case where this invisible one-pixel border is a big problem:

  1. Open any site, for example this one: https://html5test.com/
  2. Switch to full screen mode by pressing the keyboard shortcut Control + Command + F or Command + Shift + F.
  3. We rest the mouse cursor on the right border of the screen (where we have the scrollbar) and, holding the LMB, try to move the scrollbar. Nothing works out for us, because again this invisible one-pixel frame at the screen border interferes.

And again, this problem is not present in Chrome or Safari. Would like consistency with other web browsers.

This looks like an issue with DOM fullscreen and/or in cocoa widget code to me, not the builtin video controls (which youtube doesn't use anyway).

Component: Video/Audio Controls → DOM: Core & HTML
Product: Toolkit → Core
Summary: Invisible one-pixel border that prevents normal use of full screen mode in Firefox (macOS) → [macOS] Invisible one-pixel border on the right hand side that breaks fitts law (can't click items in bottom right hand corner by moving mouse to the edge of the screen/display)

I don't have an external screen with the specifications you describe and can't reproduce on my M1 macbook pro.

What numbers show up if you open the web console (cmd-opt-k) and evaluate screen.width and window.innerWidth, while you're in this fullscreen mode that has this invisible pixel on the right hand side?

Flags: needinfo?(5silentrain)

What numbers show up if you open the web console (cmd-opt-k) and evaluate screen.width and window.innerWidth, while you're in this fullscreen mode that has this invisible pixel on the right hand side?

Where exactly can I see this in the console?

Flags: needinfo?(5silentrain)

I can reproduce this, both on my 16" M1Max machine and on my 13.3" M1 machine, on the internal screen.

In the Displays system preferences, I've set both machines to the second resolution from the right. I'm not completely sure about the 13.3" machine, but for the 16" machine it's the one whose tooltip says "1728x1117".

(In reply to Markus Stange [:mstange] from comment #12)

I can reproduce this, both on my 16" M1Max machine and on my 13.3" M1 machine, on the internal screen.

In the Displays system preferences, I've set both machines to the second resolution from the right. I'm not completely sure about the 13.3" machine, but for the 16" machine it's the one whose tooltip says "1728x1117".

OK, with this I can reproduce.

I still don't really understand what's up though - everything down to the <browser> reports the same CSS pixel width as that tooltip (1728).

I can also reproduce the scroll bar issue with Firefox 78, so if it's a regression it's not recent.

OK, with this I can reproduce.

Finally! 🎉 🥳 😀

Edgar, you've worked with fullscreen. Do you have an idea of what's going on?

Flags: needinfo?(echen)

It doesn't look like an issue with Fullscreen as I could also reproduce the scroll bar issue without entering fullscreen mode, my STR:

  • Open https://html5test.com/
  • Maximum the window
  • Move mouse cursor to right border of the screen
  • Click mouse left key when scroll bar is shown, scroll bar doesn't move.

And when issue occurred, I saw following error in the log

JavaScript error: resource:///modules/UrlbarInput.sys.mjs, line 3218: TypeError: event.target.closest is not a function

I also see same error on YouTube case, so this error might be relevant?

Flags: needinfo?(echen)
Severity: -- → S3

I checked for a bug in the current latest dev version 129.0b4. The bug/problem is still present.

And the most annoying thing is that this does not work not only on YouTube, but also on any other site. Just go to full screen mode right here on this site to see this.

Unfortunately, the latest dev version 132.0b6 still has this issue.

You need to log in before you can comment on or make changes to this bug.