Mobile URL Preview inconsistent

[TheReal1604]

Your Rocket.Chat version: 0.48.2

Since some days (I think since the Cordova app update) the url preview is a bit inconsistent. Depending which URL is clicked (the posted one, or the preview url added from rocket.chat) the link is opened in mobile Safari or in the app itself.

You can reproduce it with the following steps:

• Connect to your server with the mobile app (Cordova)

• Open Channel with a posted URL

• click on a posted link
  -> link should be opened in mobile safari

• Connect to your server with the mobile app (Cordova)

• Open Channel with a posted URL

• click on the preview automatically added from rocket.chat
  -> link should open in Cordova app directly, but there is no way back to the chat

The embedded browser is nice, but it should be consistent and there must be a way back to the chat :-).

Screenshots:

(posted link from my bot, under the post the preview added from my rocket.chat server)

(the embedded browser thingy)

[engelgabriel]

@rodrigok can you help @laggedHero with this one? I was a bit lost when I tried to debug this.

[TheReal1604]

@engelgabriel @rodrigok some news on this? This is a heavy UI bug, because the user has to kill the app to come back to the chat.

[JSzaszvari]

Didn't notice this at all, but all of a sudden getting it on 53.0 where if i click the expanded preview it takes over the whole app. (On the Cordova mobile client)

[TheReal1604]

@JSzaszvari yep, that's the issue I got also. Only workaround is to kill the app.

[TheReal1604]

@rodrigok @laggedHero This behavior is also happening if you click on the paperclip on the right side and opening a attachment like a pdf file. This is not redirecting into the mobile browser - it is openend directly into the app without a way to leave this view.

[JSzaszvari]

@rodrigok Do you have any ideas on what could be causing this/Have you had a moment to look at this?

I've taken a look but i'm completely lost.

Is there a easy way to ensure that all links that get pressed on mobile open in your default external browser?

I keep accidentally tapping on links and needing to quit the app and re-launch. It's also one of the last major bugs in my eyes with it before I would consider it near perfect :)

Thanks dude

[JSzaszvari]

@TheReal1604 @rodrigok

I've noticed some strangeness with this, The URL Preview Heading cause this most visably,

If i send a link ie, https://google.com - Works fine unless you click on the heading of the preview

If the link is Https://google.com - (Capital H at the start) then both the heading and the URL cause the issue - It sees the link starting with a capital H as different to normal H

I've got the dirtiest solution I think I've ever come up with to workaround this issue. I tried debugging it for 12 hours straight the other day, trying to intercept the links by changing stuff up in Xcode but could not get anywhere. The only difference I see on the iPad or iPhone when looking at the issue is that the working links have "rel= nofollow noopener" in the href tags, but even after I added them in the issue still persists. So not sure if that has anything to do with it. Both of them are targeting "_blank" which Cordova is set to open properly, but cordova is also completely ignoring any sort of override to display the browser controls/back/forward/close buttons.

It only happens on IOS devices, Android is fine.. So I came up with a CSS Override that disables the link on IOS devices and renders it as just a non clickable heading.

It uses the CSS media option to detect every version of iOS and then makes the link non clickable. This goes into the "Custom CSS" in the Layout Category on the Admin Backend.

Warning it aint pretty....but it does the trick, Links still work on the desktop, and still shows the preview on iOS, just stops them from being able to click the link and makes it black so it tries to look like a heading.

/* Portrait and Landscape /
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
.background-transparent-darker-before {
a:link {color:#000;} / unvisited link /
a:visited {color:#000;} / visited link /
a:hover {color:#000;} / mouse over link /
a:active {color:#000;} / selected link */
pointer-events: none;
cursor: default;
}}

/* Portrait /
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.background-transparent-darker-before {
a:link {color:#000;} / unvisited link /
a:visited {color:#000;} / visited link /
a:hover {color:#000;} / mouse over link /
a:active {color:#000;} / selected link */
pointer-events: none;
cursor: default;
}}

/* Landscape /
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
.background-transparent-darker-before {
a:link {color:#000;} / unvisited link /
a:visited {color:#000;} / visited link /
a:hover {color:#000;} / mouse over link /
a:active {color:#000;} / selected link */
pointer-events: none;
cursor: default;
}}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape /
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
.background-transparent-darker-before {
a:link {color:#000;} / unvisited link /
a:visited {color:#000;} / visited link /
a:hover {color:#000;} / mouse over link /
a:active {color:#000;} / selected link */
pointer-events: none;
cursor: default;
}}

/* Portrait /
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.background-transparent-darker-before {
a:link {color:#000;} / unvisited link /
a:visited {color:#000;} / visited link /
a:hover {color:#000;} / mouse over link /
a:active {color:#000;} / selected link */
pointer-events: none;
cursor: default;
}}

/* Landscape /
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
.background-transparent-darker-before {
a:link {color:#000;} / unvisited link /
a:visited {color:#000;} / visited link /
a:hover {color:#000;} / mouse over link /
a:active {color:#000;} / selected link */
pointer-events: none;
cursor: default;
}}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape /
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
.background-transparent-darker-before {
a:link {color:#000;} / unvisited link /
a:visited {color:#000;} / visited link /
a:hover {color:#000;} / mouse over link /
a:active {color:#000;} / selected link */
pointer-events: none;
cursor: default;
}}

/* Portrait /
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.background-transparent-darker-before {
a:link {color:#000;} / unvisited link /
a:visited {color:#000;} / visited link /
a:hover {color:#000;} / mouse over link /
a:active {color:#000;} / selected link */
pointer-events: none;
cursor: default;
}}

/* Landscape /
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
.background-transparent-darker-before {
a:link {color:#000;} / unvisited link /
a:visited {color:#000;} / visited link /
a:hover {color:#000;} / mouse over link /
a:active {color:#000;} / selected link */
pointer-events: none;
cursor: default;
}}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape /
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
.background-transparent-darker-before {
a:link {color:#000;} / unvisited link /
a:visited {color:#000;} / visited link /
a:hover {color:#000;} / mouse over link /
a:active {color:#000;} / selected link */
pointer-events: none;
cursor: default;
}}

/* Portrait /
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
.background-transparent-darker-before {
a:link {color:#000;} / unvisited link /
a:visited {color:#000;} / visited link /
a:hover {color:#000;} / mouse over link /
a:active {color:#000;} / selected link */
pointer-events: none;
cursor: default;
}}

/* Landscape /
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
.background-transparent-darker-before {
a:link {color:#000;} / unvisited link /
a:visited {color:#000;} / visited link /
a:hover {color:#000;} / mouse over link /
a:active {color:#000;} / selected link */
pointer-events: none;
cursor: default;
}}

/* ----------- iPad mini ----------- */

/* Portrait and Landscape /
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.background-transparent-darker-before {
a:link {color:#000;} / unvisited link /
a:visited {color:#000;} / visited link /
a:hover {color:#000;} / mouse over link /
a:active {color:#000;} / selected link */
pointer-events: none;
cursor: default;
}}

/* Portrait /
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
.background-transparent-darker-before {
a:link {color:#000;} / unvisited link /
a:visited {color:#000;} / visited link /
a:hover {color:#000;} / mouse over link /
a:active {color:#000;} / selected link */
pointer-events: none;
cursor: default;
}}

/* Landscape /
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
.background-transparent-darker-before {
a:link {color:#000;} / unvisited link /
a:visited {color:#000;} / visited link /
a:hover {color:#000;} / mouse over link /
a:active {color:#000;} / selected link */
pointer-events: none;
cursor: default;
}}

/* ----------- iPad 1 and 2 ----------- /
/ Portrait and Landscape /
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.background-transparent-darker-before {
a:link {color:#000;} / unvisited link /
a:visited {color:#000;} / visited link /
a:hover {color:#000;} / mouse over link /
a:active {color:#000;} / selected link */
pointer-events: none;
cursor: default;
}}

/* Portrait /
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
.background-transparent-darker-before {
a:link {color:#000;} / unvisited link /
a:visited {color:#000;} / visited link /
a:hover {color:#000;} / mouse over link /
a:active {color:#000;} / selected link */
pointer-events: none;
cursor: default;
}}

/* Landscape /
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
.background-transparent-darker-before {
a:link {color:#000;} / unvisited link /
a:visited {color:#000;} / visited link /
a:hover {color:#000;} / mouse over link /
a:active {color:#000;} / selected link */
pointer-events: none;
cursor: default;
}}

/* ----------- iPad 3 and 4 ----------- /
/ Portrait and Landscape /
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
.background-transparent-darker-before {
a:link {color:#000;} / unvisited link /
a:visited {color:#000;} / visited link /
a:hover {color:#000;} / mouse over link /
a:active {color:#000;} / selected link */
pointer-events: none;
cursor: default;
}}

/* Portrait /
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
.background-transparent-darker-before {
a:link {color:#000;} / unvisited link /
a:visited {color:#000;} / visited link /
a:hover {color:#000;} / mouse over link /
a:active {color:#000;} / selected link */
pointer-events: none;
cursor: default;
}}

/* Landscape /
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
.background-transparent-darker-before {
a:link {color:#000;} / unvisited link /
a:visited {color:#000;} / visited link /
a:hover {color:#000;} / mouse over link /
a:active {color:#000;} / selected link */
pointer-events: none;
cursor: default;
}}

[TheReal1604]

@MartinSchoeler thanks to @rafaelks great work on the iOS native app, this issue can be closed for me. Want to keep this issue open for other cordova users which want to get this fixed?

[TheReal1604]

Closing this.