Page 1 of 2

Flowcode Developer's web export question re IOS Safari browser display

Posted: Tue Jun 24, 2025 7:32 pm
by canary_wharfe
Can anyone confirm that Flowcode Developer's web export is fully optimized for IOS Safari with no rendering inconsistencies? Or wondering if the generated HTML might be missing specific meta tags or viewport settings necessary for proper display on IOS mobile devices?

I'm experimenting with some of Ben's published demo code on Flowcode MQTT web apps. I have my MQTT broker for windows working and tested and also have got websocket functionality working on the broker.

When I open the compiled test html file in a browser (Opera) on a Windows device it displays correctly on the screen. When I attempt to run the same html demo file in Safari (IOS phone or iPad), the main object graphics from the Flowcode Developer 2D dashboard are not showing on the screen. It's basically a blank white screen with just a couple of button boxes - as per attached pic. To reiterate, the file is fine in a Windows browser so just wondering what's up with the IOS browser. I really want to get this stuff working on an iPad screen with Safari so if anyone can point me to what is missing I'd really appreciate it.

Re: Flowcode Developer's web export question re IOS Safari browser display

Posted: Tue Jun 24, 2025 8:04 pm
by canary_wharfe
Apologies!!! Just realised tis should have been posted in the App Developer section of the forum.

Having investigated this further I believe the problem may be to do with the 'pop up' feature. On a windows machine the graphics don't appear until after the pop up (which occurs on first running the file) has been clicked on. As the pop up screen does not show up in an IOS browser then the rest of the web page effectively gets locked out. The issue is not just related to the Safari browser. It is the same problem when running Chrome within IOS. I'm betting there is something about the way a Flowcode 'pop up' renders within a browser that is locking up the display of the web page. Just a hunch.

OK my bad! Just disabled the pop up and recompiled and it makes no difference on IOS so that's not the problem.

Re: Flowcode Developer's web export question re IOS Safari browser display

Posted: Wed Jun 25, 2025 9:24 am
by Steve-Matrix
Please post a project that shows this problem and we'll have a look (post both the source Flowcode project and the generated html file). Also, can you please post an image of what it looks like when displaying correctly.

Also, please tell us the exact versions of the browsers that are showing the problem.

And if you want to investigate further yourself, you could try seeing if there is any error presented in the browser's console window. I don't know about all browsers, but for Chrome you access this by right-clicking and selecting "inspect". This might hold some clues as to why objects are not displaying correctly.

Re: Flowcode Developer's web export question re IOS Safari browser display

Posted: Wed Jun 25, 2025 3:18 pm
by canary_wharfe
Hello Steve,
The project is actually one of Ben's tutorials he produced to help users get up to speed on IoT, MQTT and web developer. There's nothing wrong with the project contents per se. It's just the compiled HTML doesn't display on either my iPad v 17.7.1 or Iphone v.17.7.1. The iOS version is linked to the Safari version according to Apple so they are one and the same. If someone could run the html file on any other iOS version it would quickly pin down whether the problem is browser specific or something more to do with cross platform compatibility; Apple vs Microsoft.
Anyway files are attached in zip file as requested.
===========================================
As a follow up I managed to get hold of an older iPhone iOS v 15.7.9 and copied the HTML file to it via an email attachment. When I clicked on the HTML attachment to run it I got the same fault screen with the objects from the Flowcode 2D panel not visible. This phone is around 5 years old and my 17.7.1 phone is around 2 years old.

Re: Flowcode Developer's web export question re IOS Safari browser display

Posted: Wed Jun 25, 2025 4:39 pm
by Steve-Matrix
Thanks. It displays ok on my browser.

It's the dials and the chart that are not displaying in your image. I know these components display ok on Android mobile phones (e.g. using Chrome) so there must be something on the Apple devices that is not compatible for some reason.

These components use Google Charts.

I have seen reports of Safari not displaying these charts. Are you able to try a different browser?

Re: Flowcode Developer's web export question re IOS Safari browser display

Posted: Wed Jun 25, 2025 4:47 pm
by Steve-Matrix
I dug a little deeper and made a suggested edit to the code. Can you please try the attached and let me know if it works or not.

If it's still not working, can you try opening the console window in Safari. I don't know how to do this, but the internet offers some help (search for "debug safari console"). That should give errors (if any) when the webpage is reloaded.

Re: Flowcode Developer's web export question re IOS Safari browser display

Posted: Thu Jun 26, 2025 10:34 am
by canary_wharfe
Steve

Your updated file makes no difference unfortunately. I have done some digging into running on the Safari console with using Apple's Web Inspector developer tool on a MAC where you can connect the ipad/iphone Safari page to the MAC for analysis. I have a MAC so should be able to try this BUT sod's law, I need to a cable with a lightening connecting at one end and a USB-C at the other. I have a USB-C to USB-A adapter somewhere and should be able to connect the standard lightening to USB-A cable into the adapter. According to Apple's developer notes it should be able to connect them up wirelessly but atm I'm totally brain dead so finding the adapter is probably the easiest solution. I'm hoping I can get a copy from the MAC screen on how the iphone / ipad is interpreting the web page elements. On reading up yesterday on other similar issues a single element style script change that Safari made to a web page, totally ruined a graphic within a page. It beggars belief that web designers have to contend with these issues. As soon as I can get the cable hook up sorted I'll power up the MAC and give it a try and get back to you. If I can't get this sorted before friday I'll do it over the weekend.

P.S. I'll also try running the html page on the MAC itself as part of the investigation.

Re: Flowcode Developer's web export question re IOS Safari browser display

Posted: Thu Jun 26, 2025 11:47 am
by Steve-Matrix
Thanks for the update. Unfortunately I don't have access to a device that can run Safari. Please let me know if you find anything.

Re: Flowcode Developer's web export question re IOS Safari browser display

Posted: Thu Jun 26, 2025 2:46 pm
by chipfryer27
Hi

I am no fan of apple products but when I created a FileMaker solution that accessed an embedded device (created with FC of course) I also needed to create an "app" that ran on a mini iPad. FileMaker allowed me to do this.

This was over a decade ago and if doing it now would simply use FC app developer.

Point is that I should have that iPad mini somewhere and could try on that to see what happens. It won't be latest Safari but I can see if it works or not.

I have tried other FC "apps" on browsers such as Firefox/Edge/Chrome/DuckDuckGo on both Windows and Linux without too much bother.

Regards

Re: Flowcode Developer's web export question re IOS Safari browser display

Posted: Thu Jun 26, 2025 4:35 pm
by canary_wharfe
Hi chipfryer27

If you can find your ipad min and test the subject attachment html file to see if it displays correctly with all the 2D panel objects it would help widen the investigation.