Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Safari/WebKit: `#react-root` grows to the content height (`block-size: -webkit-fill-available`), the whole page scrolls and the composer is pushed below the window

Open Beginner friendly
  • Is something wrong?
#43,068 2 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@Vaibhav211960 is already working on this.

Since Oct 24, 2026.

  • #43112 by @Vaibhav211960 — open

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
76/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css, typescript
Domain
frontend

Research direction

Read apps/meteor/client/styles/imports/general/react-root.css (or the path in 8.9.0) and the history of #22212, then check the #react-root sizing alongside the iOS behavior reported there. Verify the change in desktop Safari or WebKitGTK and re-check iOS; done means the composer stays visible, only the message and sidebar lists scroll, and the page has no vertical or horizontal scrollbar.

Written by the indexing model from the issue text.

Description

type: bug
Description

In desktop Safari the whole page becomes scrollable: the message composer is not visible until you scroll the page down, and scrolling the page moves the room header and the sidebar out of view as well. Page zoom, clearing website data, a private window or disabling extensions do not help. Firefox is fine.

It is reproducible with WebKitGTK (MiniBrowser 2.52.6 on Linux), so it is WebKit behaviour, not a local Safari setting.

Cause: apps/meteor/client/styles/imports/general/react-root.css (in 8.9.0: apps/meteor/app/theme/client/imports/general/react-root.css):

#react-root {
	position: relative;
	display: flex;
	overflow: visible;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	padding: 0;
	block-size: -webkit-fill-available;
}

Firefox ignores -webkit-fill-available and uses height: 100vh. WebKit applies it, and since #react-root is a flex item of body (display: flex; flex-direction: column; height: 100%), its height resolves to the height of its content.

With block-size: 100% the layout is correct again. The horizontal scrollbar that also appears is a side effect: once the page has a vertical scrollbar, width: 100vw is wider than the visible area.

The -webkit-fill-available line was added in #22212 (2021, "Message box hiding on mobile view (Safari)").

Steps to reproduce
  1. Open the web client of Rocket.Chat 8.9.0 in desktop Safari 26.5 (or WebKitGTK MiniBrowser 2.52).
  2. Log in and open a channel with a longer message history.
  3. The composer is not visible; the page has a vertical scrollbar. Scroll the page down: the composer appears, the room header disappears.
Expected behavior

The layout fits the window; only the message list (and the sidebar list) scroll.

Actual behavior

#react-root is as tall as its content, so the whole document scrolls and the composer is below the window.

Workaround

Administration → Settings → Layout → Custom CSS (ASCII only, see the related Custom CSS truncation issue):

#react-root {
  block-size: 100% !important;
}
Suggested fix

Remove block-size: -webkit-fill-available from #react-root (height: 100% / 100dvh are reliable in current browsers), and re-check the iOS case from #22212.

Server Setup Information
  • Version of Rocket.Chat Server: 8.9.0
  • License Type: Community (no license)
  • Number of Users: about 36 active
  • Operating System: Debian 13 (host)
  • Deployment Method: Docker (official image rocketchat/rocket.chat:8.9.0, docker compose)
  • Number of Running Instances: 1
  • DB Replicaset Oplog: replica set (single node)
  • NodeJS Version: v24.15.0
  • MongoDB Version: 8.0.32
Client Setup Information
  • Desktop App or Browser Version: Safari 26.5.2 (macOS); WebKitGTK MiniBrowser 2.52.6 (Ubuntu). Not reproducible in Firefox.
  • Operating System: macOS; Ubuntu 26.04
Additional context

The -webkit-fill-available rule is unchanged on develop.

Relevant logs

None (layout issue, no errors in the console or the server log).

Dominant language
TypeScript
Stars
46.3k
Forks
14k
Avg merge
2d 8h
Merged PRs (30d)
291

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from RocketChat/Rocket.Chat

All issues in RocketChat/Rocket.Chat

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.