Page scrolls down automatically while typing when being zoomed out using Safari

Summary

Typing in the text box when commenting a merge request or issue while having a zoom value less then 100% constantly scrolls down the page when using Safari on Mac.

The workaround is to reset the zoom factor to Actual size, or zoom in.

Steps to reproduce

1. open a merge request or issue detail page
2. press Cmd and - to zoom out
3. type in the textbox

What is the current bug behavior?

The page scrolls down while typing.

What is the expected correct behavior?

The page should not scroll while typing.

changed the description

changed the description

added devopscreate groupsource code severity4 typebug labels

added frontend priority4 labels

changed milestone to %Backlog

added [deprecated] Accepting merge requests label

changed milestone to %Backlog

I get this at the default zoom level -- I'm getting it right now while typing this. It's super annoying.

Please press Cmd and 0, just to make sure you didn't zoom by accident. For me it's not happening on default zoom level.

@christian.schaefers I did check that.

Weirdly, zooming in seems to be a workaround. Maybe it's triggered by window size or screen resolution, such that it's an issue for me at the default zoom level but for you only when zoomed out. (I have dual 24" screens, each at an effective resolution of 2304x1296.)

@fseifoddini I think I found your problem.

yup!

added sectiondev label

Setting label(s) Category:Source Code Management based on groupsource code.

added Category:Source Code Management label

Hello, I just wanted to say that I'm affected by this problem as well and that I'd gladly appreciate it being fixed. Thanks in advance.

Me too! I consistently use gitlab zoomed out in safari, would love to see this fixed

Has the problem been fixed?

I've put up with this problem for over a year now. Big part of our workflow.
I switched to Chrome due to the Safari and MR diff bug and have enjoyed getting away from the bug discussed here as well.

I love GitLab, but sometimes....

there is still a little initial wiggle on the first key stroke but overall it seems fixed for me

My default zoom level in Safari is 85% and GitLab (version 14.2.0-pre) keeps scrolling by typing text into this box right now.

In the meantime I could narrow down the issue: Apparently the bug is caused by the following input event listener target of the textarea:

textarea#note-body.note-textarea.js-vue-comment-form.js-note-text.js-gfm-input.js-autosize.markdown-area.js-gfm-input-initialized

Unfortunately I had no luck to track it down further, as Safari gave me strange output in the debugger, e.g. by giving me brakepoints in the sentry JS code, which shouldn't be related to this issue. However, if I temporary deactivate this event listener, all seems to be fine, except the textarea doesn't grow anymore.

From my brief look today, this seems mostly fixed. It budged just a little, one time. I'll keep an eye on it and come back if it seems stably resolved.

Typing in the text box when commenting a merge request or issue while having a zoom value less then 100% constantly scrolls down the page when using Safari on Mac.

This has been a real pain for me, but hopefully this issue provides a workaround: it works fine after reseting the zoom factor to "actual size".

I wish I could zoom out though.

changed the description

Yep, this is happening with me too, only in Safari. It took me a while to realize it's a zoom issue. Although, it's causing me some trouble too, cuz' usually I zoom out on my second display, and it would be lovely to have it fixed.

Agree with others. When zoomed out by one step, the screen is moving even here when typing this message. I am using the newest Safari browser 15.3 (17612.4.9.1.8) on the newest Big Sur 12.2.1. When I reset the zoom, it's ok, but the letters are then pretty big on my 24" lcd :(.

来信已收到，请注意查收

I think this is the source of this issue: https://github.com/jackmoore/autosize/issues/396

来信已收到，请注意查收

I'm experiencing the same issue with certain zoom levels on 15.6.1 (17613.3.9.1.16). With Actual Size, there is no scrolling, but if I Zoom Out once, the page scrolls down with every letter I type.

A workaround in the meantime — leave the page at Actual Size then use a CSS customization extension and just set:

html {
  font-size: 90% !important;
}

to your desired size. Works fine for me. There's no font size preference in Gitlab and this allows me to fit much more code on the screen.

marked this issue as related to #207570 (closed)

I have a hunch this is related to the root cause of #207570 (closed). Something is measuring the scroll position, expecting an integer, but gets a float instead. That float then gets rounded explicitly or implicitly, and so the scroll position moves slightly.

I still have this issue. The CMD-0 advice works. but would love to see a fix.

added SLOMissed label

This is still existing today on a brand-new, fully up-to-date Mac. I'd love to see a fix.

For further colour, it does not happen when the height of the container is constrained within the window height. As you add more text/information to the page and it extends below the bottom of the window view, then the rest of the content starts sliding down.

mentioned in issue #426308

I was very glad to see this has already been acknowledged. Then I became very sad to see it's been 4 years without a resolution.

This did not happen on older, self-hosted GitLab instances, so it's likely a regression with something in newer versions and/or possibly specific to the cloud version.

For reference, I'm experiencing this with:

• macOS Sonoma 14.1.1
• Safari 17.1
• 85% zoom

Something I noticed is that at 85% zoom, the page scrolls a few pixels with every keystroke. However, one step down at 75% zoom, it behaves differently. At 75%, the first keystroke might scroll about 1 pixel, then subsequent keystrokes will not cause additional scrolling. At 50% the issue seems to disappear entirely.

Also worth noting: some people have noticed that Cmd+0 does not seem to help, and I was almost fooled by this. However, it's important to realize that if you have configured a default zoom level per-site (as I had) then Cmd+0 does not zoom to 100%, but rather to the site's configured default zoom - 85% in my case. I suspect this is why some people thought 100% zoom was also causing the problem.

Found the root cause: a WebKit bug that the autosize library does not handle gracefully:

• https://github.com/jackmoore/autosize/issues/396
• https://bugs.webkit.org/show_bug.cgi?id=237225

For now, it looks like there are four possible solutions, in order of increasing effectiveness (and complexity):

• Users can set default zoom to 75% or 100%, but not 85%
• GitLab can disable autosize on WebKit browsers
• Someone can patch autosize to detect/handle the edge case
• Someone can fix the upstream WebKit issue

mentioned in issue #244951

This bug is really annoying. I suspect this 'autosize' library is also the reason why typing in a MR comment can easily take 500ms per character in Safari. Both bugs combine to make reviewing large MRs in Safari really tedious.

It'd be really good if gitlab could do one of the things @justin.mrkva suggests above please. A different option (hinted at on https://github.com/jackmoore/autosize/issues/396 would be to disable the auto-shrinking, as apparently that's the issue, though not sure there's an API for that).

Is there anyway to set a bounty on a gitlab bug? I'll happy chip in a few hundred USD...

mentioned in commit ea81cf41

mentioned in merge request !176853 (merged)

mentioned in commit 1efe8426

assigned to @iamphill

changed milestone to %17.8

added UX Paper Cuts label

mentioned in commit 339e52c6