Forum Academy Marketplace Showcase Pricing Features

Is this the biggest limitation of Bubble?

Has everyone on this thread submitted a bug report?

Edit: I have submitted a bug report. Please do the same as the “help needed” tag on the forum will not get attention from the technical team.

1 Like

This is concerning, as needless to say, a lot of apps will rely on social media referrals.

2 Likes

I submitted a bug report. For me I confirmed the issue started with the release of iOS 14.8 last week. Before that my sites were displaying fine.

2 Likes

@jess Is the team aware of this issue?

1 Like

It seems to be specifically an issue with dynamic data being displayed as a text, button, or a link.

Dynamic images work fine, and I can display text data in, for example, an input’s initial content, but it won’t display in text elements, buttons, or in links.

So it’s not an issue i accessing the data, but rather displaying it in certain types of elements.

3 Likes

I would say let’s file bug reports at bubble.io/bug_report. The more we file the more attention we’ll probably catch from the Bubble team is my guess…

2 Likes

I don’t know if it’s possible (I’m a total noob in programming),

but instead of uploading your bubble link in facebook, add a firebase dynamic link that will trigger to open your bubble url in a native browser?

Just brainstorming here haha

Hey Jared,

I had no choice but to come up with the workaround.

Currently, my primary goal is to get them off the FB browser. So to achieve that, I have my user go through survey questions and sign up (using all static and Arial or Inter fonts). After they signup, they will receive a SMS notification with the verification code and then the link to my website. When they click on the link from SMS, they will open up the site with the default browser on their phone. They put in their verification code, and now they are in the perfectly working browser.

This is the best workaround I could come up with. If anybody else has a recommendation, please let me know!

That’s a good workaround. It won’t work for my use case, unfortunately.

Bubble has confirmed this is a bug so I hope their engineers will resolve it quickly.

In the meantime, I am detecting the user agent of the Facebook InApp browser and if the OS is ios 14.8 or 15. When that is true, I display a floating group overlay over the whole site with the message:

1 Like

Brilliant. Could you post the code snippet for identifying facebook’s user agent?

You can use this in Javascript: navigator.userAgent

Or one of the browser plugins like this to get the UserAgent: Browser Plugin | Bubble

Then setup workflows that look for text in the user agent string like this (I have one for 14.8 and one for ios 15):

You can also use something like the user agent parse api here: https://developers.whatismybrowser.com/api/

For faster speed without any API calls, it’s best to use the client’s userAgent though since we’re looking for one specific thing for the time being.

Here’s what my phone shows for the FB inApp browser user agent when on iOS 14.8:
Mozilla/5.0 (iPhone; CPU iPhone OS 14_8 like Mac OS X) WebKit/8611 (KHTML, like Gecko) Mobile/18H17 [FBAN/FBIOS;FBDV/iPhone12,3;FBMD/iPhone;FBSN/iOS;FBSV/14.8;FBSS/3;FBID/phone;FBLC/en_US;FBOP/5]

(To get the user agent, post this link to you facebook page and then open it up in Facebook and it will use the in-app browser and you can get the user agent for your device: https://developers.whatismybrowser.com/useragents/parse/?analyse-my-user-agent=yes#parse-useragent )

1 Like

Thank you, this is great!

Update, Bubble engineering pushed out a fix today and everything is working in the Facebook inApp browser for me! Very happy to see this resolved!

1 Like

Fonts are still not loading properly on my end.

@gbenchanoch

This is likely expected, Facebooks trashy browser is probably blocking external font loads prevent potential attacks.

Make sure to choose web safe fonts so they load properly on all browsers

https://www.w3schools.com/cssref/css_websafe_fonts.asp

This isn’t a complete list but a few good options.

You can use user agent for Facebook + conditionals to set fallback fonts or add CSS site site to set your fallback font

CSS Basics: Fallback Font Stacks for More Robust Web Typography | CSS-Tricks

1 Like

Interesting. We paid quite a chunk of change for our brand typography. It seems there are unexpected disappointments around every corner when dealing with the major internet-based companies. It feels like Apple, Google, Facebook all make breaking changes on a whim without notice. It’s very frustrating.

Is there a way to do this via the Bubble style sheet, or do I have to go and add conditionals to every element in my app?

Thats unfortunately how cross browser tends to work, you can either add a css body fallback or do on individual elements.

1 Like

I mentioned this in my bug report and Bubble’s reply: "It is expected to see this discrepancy in the text font as our engineers have to modify the way that the Facebook browser loads fonts in order to resolve this issue as a whole. Our team will continue to improve how Bubble apps render in the Facebook browser in more detail now that the top priority of getting them to load has been accomplished. "

I think the websafe fonts approach as an interim is worth exploring.

1 Like

Thank you both! This is why the Bubble community is the best.

EDIT:

I think this might be the best fix considering how much font sizes can vary, which is an issue when you have complex branding/formatting. I like the idea of asking users to switch over to the proper experience rather than providing a sub-par experience.