Why does word wrapping in Brave behave differently between Linux and Windows?

Browser Support Desktop Support
1

Description of the issue:
Using the exact same HTML, JavaScript, CSS and message, Brave on Linux incorrectly wraps text while Brave on Windows displays it correctly.

In the following screenshots, you can see the exact same message being wrapped incorrectly on Linux compared to Windows. The width of the parent container is shown to demonstrate how much free space there is for the children elements.

Linux Brave:

wrap-issue-linux
wrap-issue-linux911×112 2.78 KB

Windows Brave:
wrap-issue-windows

How can this issue be reproduced?
I made a minimal code example here: Brave wrapping issue example

Expected result:
I would expect the wrapping behavior to be consistent, looking like the Windows example (shown above), no matter what OS Brave is running on.

Brave Version:
Brave 1.80.113 (Official Build) (64-bit)
Chromium: 138.0.7204.49
on both Debian Linux x86_64 and Windows 10 64-bit

Additional Information:
It appears this issue is also present in Chromium on Linux.

2

I suspect that given the combination of both these data it’s likely related to the chat system you’re using rather than the browser specifically and how it renders based on the detected OS.

If you use another browser do you see the same word wrapping difference?

3

Thanks for your reply. :+1:

On Firefox-based browsers, both on Linux and Windows, the wrapping behavior is correct (like Brave on Windows).

The chat system does not do any browser or OS-specific checking, so it’s not that. I’m the dev for the chat system so I’m familiar with its operation.

I’m still trying to make a minimal-code example, but I cannot get it to show the issue, which is frustrating…

4

I was finally able to make a minimal code example. Please check out the following page in Brave Linux then in Brave Windows:

Brave wrapping example

Thanks! :+1:

5

So I think I’ve found the solution to the wrapping issue…

Looking at the screenshots or viewing the test site, if you look at the element with the three dots (…) (‘msg_actions’) near the user and time, its CSS has float:right; set while the next element (‘text_bubble’) does not have clear:both; set. When adding clear:both; to the 'text_bubble’s CSS, it resolves the problem.

The actual issue is still not resolved, though. Even with the CSS fixed, it still begs the question “Why is it rendering differently on Windows than Linux?”