Editor doesn't work in IE11

[torrin47]

Receive IE11: SCRIPT1002: Syntax error. Not alone in this:

https://forum.vuejs.org/t/vuejs-not-working-in-ie11-script1002-syntax-error/48195 https://stackoverflow.com/questions/52881807/compiling-es6-and-vue-js-not-working-in-ie-11/52882447

[aergul]

Interestingly, I was getting different errors than this. Regardless, there were a number of libs/features that didn't get along with IE11:

• Syntax highlighter: replaced
• Object cleaner: transpiled to ES5
• Fetch: polyfilled
• Recaptcha: Needed a minor hand

With these changes, I got IE11 to the point of load/save/submit:

I do need to do some cleanup and broader testing tomorrow, at which point I will move this ticket along for review.

[aergul]

Ended up replacing the object cleaner with another one as it proved to be a pain to package up properly and have it still work in IE11.

Found and fixed a couple of bugs. I believe it's now fully functional in IE11 though some visual annoyances remain. The text inside the "submit" form is missing in IE11 despite DOM/CSS/etc are all seemingly correct.

I'll pause here and let you @jzichichi @torrin47 test it out. IE has a much slower JavaScript engine, so some patience may be required.

[jzichichi]

@aergul - it seems to work well for everything I have tested so far except the load feature. I can browse to the file I want to load, but do nothing further from there. See below

[torrin47]

Still problematic on my end. All of the icons appear to be blocked/missing,

and Recaptcha hit me with 4 different tests and then failed with this error:

SCRIPT5007: Unable to get property 'iterator' of undefined or null reference recaptcha__en.js (14,140)

[aergul]

@jzichichi @torrin47 I'd appreciate if you can provide screenshots following the steps:

• Open IE11
• Open Developer Tools using F12 or from the Tools menu
• Go to https://podme-dev.coronaenv.com
• Perform interactions to the point where you start having issues and/or console error messages (in Developer Tools)
• Make a screenshot of entire browser window (including Developer Tools) and paste here.

[torrin47]

No errors on the icons - they're just blocked, and I believe it's due to this problem: https://github.com/FortAwesome/Font-Awesome/issues/8825#issuecomment-201043264 EPA security policy appears to block fonts from downloading - I'm unable to change or even view any of the detailed settings, nor am I able to add any sites to my Trusted sites list. It's not just our site, everything at FontAwesome is blocked: It's possible that moving the Editor to an epa.gov URL might get IE11 to treat the site as Local Intranet or Trusted Sites and allow the fonts through. That'd help.
As for the rest of your request, when the page loads, I get a bunch of sandboxed iFrame errors in the console before I touch anything - this appears to all be related to recaptcha. The site then works mostly (without any of the icons, or calendar widgets) until submission. Then I just get more of the same iFrame errors. Actually, the submission does go through despite the console error.

[aergul]

@torrin47 FA fonts are packaged into the app and are not being downloaded from their website, CDN or other third party. However, you are still correct that the fonts are blocked even from the origin server due to an IE security setting:

The app being hosted at EPA may not necessarily help as the extramural researcher will likely be outside the EPA network and the site will get "internet" security zone treatment.

There are SVG/PNG/CSS/BASE64 methods suggested to get around the font download limitation. If you like, we can see if one of those can work?

I too have seen other messages in the browser console, related to reCAPTCHA and still I was able to use the app and submit the doc. There are a few things we could do to make the app IE11 friendlier: 1- Implement above suggestion for disabled font downloads 2- Our tool chain is currently browser agnostic. We can switch to a sister tool chain that has some IE compatibility support. I know it helps with some visual aspects and automatic polyfills. 3- We could try to fine-tune our use of reCAPTCHA to minimize IE11 impacts or could try out the v3 invisible reCAPTCHA to see if it behaves better in IE11.

Your thoughts?

[torrin47]

I'd be surprised if any of the external researchers would be using as restrictive a browser as EPA's configuration of IE11, so we might be able to get it working for the EPA internal audience (who do need to be able to see and test it) and call it good. But if there's a way to fail icons over gracefully or implement a solution that we know will work in locked-down IE without too much of a compromise for everyone else, it might be worthwhile if annoying.
I think recaptcha seems to be working at this point, and the other issues I'm seeing (missing calendar widget, odd modal size) might all be related to the missing icons, so I'm not sure about switching tool chains - unless somehow that'd help with the missing icons?

[aergul]

Here is a POC where the submit button only has been replaced with a PNG icon. If it works in your IE11 as well then we can replace the rest @torrin47

[torrin47]

Yup, it does work in EPA's configuration of IE.

[aergul]

I guess I needed a quiet day to get around to committing the updates and updating the ticket.

Nearly all icons have been replaced withe IE11-friendly ones. Unfortunately the same method did not work for the floating action button widget. So, changed that into a left drawer menu controlled by the EPA logo icon/button. Added some load-time animation to alert the users to it as well. The only hold-out I'm aware of are the icons used by "General Keywords" but it still seemed usable. Not sure how far you want to for marginal browser and test users.

[torrin47]

I think it looks good - the animation is fun. Spoke with Mike today, now that the shutdown is over, and he asked me to compile the user feedback and put together a final punchlist, so I'll try and get that worked up in the next day or so. Thanks for your patience in the meantime!