Cross Browser Issues with IE and Safari

NVwingh84 commented 4 years ago

I have an application in test mode hosted on Github, which is working on Chrome and Firefox, but not on Internet Explorer nor Safari. I am unsure about the root cause of the problem, though the errors appearing in the debugger are related to Flamelink.

You can find the project through following link: https://github.com/NVwingh84/PortfolioWebsite

My keys are in there, but for now let's just assume nobody is going to hack my portfolio website.. :-) :-)

jperasmus commented 4 years ago

Do you perhaps have your portfolio hosted somewhere so I can take a look at the link without needing to set it up myself?

Side note: your Firebase connection details are meant for client-side use, so it is fine if people can see it. You can set database rules to limit access based on a user's authentication, etc.

NVwingh84 commented 4 years ago

Niels Vanwingh, Portfolio

Niels Vanwingh, Portfolio

Niels

Niels Vanwingh, Portfolio |

|

Verzonden via Yahoo Mail op Android

Op vr, okt. 11, 2019 om 9:34 schreef JP Erasmusnotifications@github.com:

Do you perhaps have your portfolio hosted somewhere so I can take a look at the link without needing to set it up myself?

Side note: your Firebase connection details are meant for client-side use, so it is fine if people can see it. You can set database rules to limit access based on a user's authentication, etc.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

jperasmus commented 4 years ago

I see now, I actually just missed the link that you sent in the original message. Apologies for that 🤦‍♂️

I looked at your portfolio website on IE and I see the main error that is thrown is that IE doesn't understand Symbols.

Generally, it is expected for Flamelink to be used as a module and processed through a build step (Webpack, Rollup, etc), but it is not a requirement. In both cases, you would need to make sure that the necessary polyfill's are applied for your target environments.

When using a build process, you could use something like babel-polyfill. When using the script tags, like you're doing, you can use a polyfill service like polyfill.io. Try and add the following script tag at the top of any of your other script tags to see if that polyfill's the missing Symbols for you: <script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script>

Note: that link imports all polyfills, which is probably more than you need. You can customize which features to polyfill.

NVwingh84 commented 4 years ago

Hey,

Thanks for your reply..

Great to have a root cause of the problem! Thanks for that!

For the moment, I am not using a build step. Using one would require me to learn how to use Webpack, Rollup or another bundler application. I am currently in the middle of two other projects and would just like my Portfolio Website to be available cross-browser. So I would prefer to use a CDN script.

I have tried the script you sent and three or four others, none seem to work.. Still with the same result. Do you have any other options than using a bundler?

gitdubz commented 4 years ago

Hi @NVwingh84 when updating to the latest version of the firebase SDK, do you still have the issue?

Adding the script for the polyfill before all other scripts should resolve the issue. The Firebase JS SDK's now have better support for browsers and the polyfills should solve any of the Flamelink SDK dependencies.

You can read more about it here https://firebase.google.com/support/guides/environments_js-sdk

gitdubz commented 4 years ago

Additionally please add the script to your head section

<!-- polyfill script polyfill.io -->
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script>

<!DOCTYPE html>
<html lang = "en"> 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width">                                                                                        
        <title>Niels Vanwingh, Portfolio</title>
        <meta name="description" content="Niels Vanwingh, Portfolio">  
        <meta name="author" content="Niels"> 
        <link rel="stylesheet" type="text/css" media="(min-width: 870px)" href="styles/projecten_style.css">   
        <link rel="stylesheet" type="text/css" media="(min-width: 520px) and (max-width: 870px)" href="styles/projecten_medium_style.css"> 
        <link rel="stylesheet" type="text/css" media="(max-width: 520px)" href="styles/projecten_small_style.css"> 
        <link rel="stylesheet" href="https://use.typekit.net/ooo6jby.css">                                                                                  
    </head>

should be

<!DOCTYPE html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width">                                                                                        
        <title>Niels Vanwingh, Portfolio</title>
        <meta name="description" content="Niels Vanwingh, Portfolio">
        <meta name="author" content="Niels"> 

        <!-- polyfill script polyfill.io -->
        <script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script>

        <link rel="stylesheet" type="text/css" media="(min-width: 870px)" href="styles/projecten_style.css">   
        <link rel="stylesheet" type="text/css" media="(min-width: 520px) and (max-width: 870px)" href="styles/projecten_medium_style.css"> 
        <link rel="stylesheet" type="text/css" media="(max-width: 520px)" href="styles/projecten_small_style.css"> 
        <link rel="stylesheet" href="https://use.typekit.net/ooo6jby.css">                                                                                 
    </head>

Note where I have placed the polyfill

gitdubz commented 4 years ago

Closing issue due to inactivity

flamelink / flamelink-js-sdk

Cross Browser Issues with IE and Safari #106