Grey screen after joining channel when using Safari on IOS

[tstafford]

Description:

Grey screen after joining channel when using Safari on IOS

Steps to reproduce:

1. login to rocketchat
2. click the hamburger in the top left
3. click any channel

Expected behavior:

the channel loads and is visible

Actual behavior:

the channel momentarily appears and then the entire screen is grey

Server Setup Information:

• Version of Rocket.Chat Server:
• Operating System: 5.3.0
• Deployment Method: tar
• Number of Running Instances: 1
• DB Replicaset Oplog:
• NodeJS Version: v14.19.3
• MongoDB Version: 5.0.9 / wiredTiger (oplog Enabled)

Client Setup Information

• Desktop App or Browser Version: Safari
• Operating System: iOS 15.6.1

Additional context

Relevant logs:

Server log:
{"level":40,"time":"2022-11-02T14:58:46.819Z","pid":876,"hostname":"x","name":"VoIPService","msg":"Voip is not enabled. Cant start the service"}
{"level":40,"time":"2022-11-02T14:58:51.456Z","pid":876,"hostname":"x","name":"VoIPService","msg":"VoIP service already stopped"}
{"level":51,"time":"2022-11-02T14:58:51.832Z","pid":876,"hostname":"x","name":"Migrations","msg":"Not migrating, already at version 281"}
[DatabaseWatcher] Using change streams
{"level":40,"time":"2022-11-02T14:58:53.182Z","pid":876,"hostname":"x","name":"StreamBroadcast","msg":"You are operating multiple instances... some features will not behave as designed."}
+-----------------------------------------+
| SERVER RUNNING |
+-----------------------------------------+
| |
| Rocket.Chat Version: 5.3.0 |
| NodeJS Version: 14.19.3 - x64 |
| MongoDB Version: 5.0.9 |
| MongoDB Engine: wiredTiger |
| Platform: linux |
| Process Port: 3000 |
| Site URL: https://x.org |
| ReplicaSet OpLog: Enabled |
| Commit Hash: eb12200 |
| Commit Branch: HEAD |
| |
+-----------------------------------------+
Loaded the Apps Framework and loaded a total of 5 Apps!

[phriedrich]

Same here on macOS 13.0 with Safari 16.1 and on iPad OS 16.

[tstafford]

Console from testing on IOS device...

[MaxWaldorf]

confirmed for iOS users here as well...

[FF-Ibb-PD]

Confirmed for my users also. It also seems to be a Problem on Firefox on Iphone.

[phriedrich]

@FF-Ibb-PD Firefox on iOS uses Webkit as required by Apple's policies. So it's probably an issue with Webkit.

[teach404W]

+1 same problem here

[svenseeberg]

I have a user reporting the same issue with MacOS 12.6 with Safari. He also seems to have an issue with Firefox which is loading endless, but that may be unrelated.

[Sonnenfleck]

Same here. Updated from 4.8.6 to 5.3.0 and upon entering any channel in Safari (iOS or Mac OS 13.0.1), the screen goes blank almost immediately. The log didn't show any errors (except the usual "autotranslate not available").

Firefox and Edge on Mac OS worked fine.

[phriedrich]

Still broken on 5.3.1.

Edit:
Did some testing what errors it shows on 5.2.0 (working) and 5.3.0/.1 (failing) and the most interesting seems to two Syntax error: Invalid regular expression: invalid group specifier name.

Seems like Safari doesn't support some features like lookbehind.

[phriedrich]

Found something: I believe it's line 60 in /apps/meteor/client/views/room/MessageList/components/UrlPreview/PreviewList.tsx:

const normalizedUrl = imgURL.replace(/(?<!:)\/+/gm, '/');

This was introduced #27159 (5.3.0 release) and fails if I test it in Safari's JS console.

[ggazzo]

closed by #27294

[phriedrich]

Great, it’s been fixed in 5.3.2. Thanks @filipemarins