Discourse in an iframe on iOS Bug

(Louis DeScioli) #1

Hey everyone,

Over at Grove Labs we’re using Discourse to host our community discussions, and have a separate web app that users go to to control and manage their groves. Using Discourse has been a great experience so far — our users are active and engaged, both with company support and each other. I love seeing everyone share their experiences, give feedback, and come together over indoor farming :heart:

To try and make the transition between our app and our Discourse site smoother we’ve been experimenting putting Discourse in an iframe within our app. Most of our users install our web app to their home screen for a full page experience, and the feedback we’ve gotten of having it in an iframe instead of pulling them out to the browser has been great.

Unfortunately, iOS has a very annoying way of handling iframes. It forces them to expand to the full height of their content, as noted in this StackOverflow answer (and elsewhere), regardless of the styling you put on it. This wouldn’t be the worst, except Discourse’s infinite scrolling causes the page to grow and grow and grow, and while it’s growing and you’re trying to scroll it’ll give very janky behavior like jumping back up to the top of the page, intermittent blank pages, trouble replying while replies are loading, etc.

Can anyone think of a good workaround for this? A couple I’ve thought of:

  • Modifying Discourse to have a “Click to Load” or something instead of automatically loading more posts and replies
  • Detecting if the user is on iOS and open Discourse externally if they are

Neither are great :sadpanda: Sure wish the Apple software engineers hadn’t decided to forego standards and make their iframes behave erratically… Help is very appreciated, thanks!

(Sam Saffron) #2

@eviltrout plans on improving embedding a bit for the upcoming release, I wonder if embedding + using API would be enough to appease your users? Can you post some screenshots of what you got now?

also, grove looks really cool :slight_smile:

(Anton) #3

Offtopic question

I can see your website is developed in Meteor. Can you share a few words how you find it for developing websites like yours?

(Louis DeScioli) #4

Possibly, depending on what embedding is like. Happy to give it a spin if it’s available.

It’s in our road map is to slowly transition parts of the content from Discourse to our app with the API, but the goal behind that is to start structuring the best information into more easily digestible references. I was surprised that there’s not a framework-independent Javascript API client yet. Though there might be soon… :wink: But that’s only for certain parts, we would still be looking for an iframe or embed solution.

I made an account for you (or whoever) on Grove OS so you can check it out. Head to http://os.grovelabs.io and login in with discourse, testing. Click on the “Community” link in the sidebar.

(Louis DeScioli) #5

Hey @meglio,

Yup, good eye. Mostly for speed of development. I’d used Meteor to build a couple web apps in school so it was the quickest tool for me. I was very new to web development (and still am), so here were the features that did it for me:

  • Easy to build client-side rendering/single page app/super fast switching between pages.
  • Very accessible build process. Never had to learn what uglification or minification was, it was done for me.
  • Live updating of the site is pretty sweet, and that was free.

It might be overkill, but it allowed me to build it fast. If I were to build it again I’d use React instead of Blaze (the app is built with React). Not sure if I’d hook it up to a Meteor backend, probably would though. A DDP connection in case we want to do anything real-time is really handy. It would certainly benefit us speed-wise to have a CDN in front of it though.

(Andrew Hopper) #6

Did you end up figuring out a good solution for this? We have a framed Discourse instance in an Ionic app and everything works great except for this glitch which is really frustrating for users.

(Louis DeScioli) #7

We did not. We’ve since made a native iOS app for our new hardware product (check it out!), and pull in specific articles from our Discourse installation through a native Safari view. Discourse articles look pretty good if you enable Reader Mode for the Safari view, that was a really great quick win.

(Andrew Hopper) #8

Your product looks fantastic! Thanks for the tip on Reader Mode for Safari. I think we’re going to have to build something using the API. Framing Discourse doesn’t seem to be working well on iOS.