juicy-ace-editor
juicy-ace-editor copied to clipboard
Juicy
Does not work in FireFox
Steps to reproduce
Install the editor:
bower install juicy-ace-editor
Create an index.html file, include all of the necessary stuff:
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-hi-sd-ce.js"></script>
<link rel="import" href="bower_components/juicy-ace-editor/juicy-ace-editor.html">
</head>
<body>
<juicy-ace-editor></juicy-ace-editor>
</body>
</html>
Run a web server and open up index.html in FireFox. Nothing is displayed. I've noticed this problem throughout the year, I'm just now formalizing the issue.
Expected result
The editor shows up and works
Actual result
The editor does not show up nor does it work
Browsers affected
- [ ] Chrome
- [x] Firefox
- [ ] Edge
- [ ] Safari 9
- [ ] Safari 8
- [ ] IE 11
Screenshot
I think this has to do with the v1 Shadow DOM now in FF. Perhaps this helps: https://github.com/valaxy/ace-shim-about-shadow-dom/
I'm not sure that is the issue. FF doesn't have Shadow DOM currently , and I've experienced this problem many months ago as well, when I know FF didn't have Shadow DOM.
https://caniuse.com/#search=shadow%20dom%20v1
I think this problem comes from polymer shady dom implementation - which is activated in Firefox. If I force to use shady DOM (https://www.polymer-project.org/2.0/docs/polyfills#settings) I see similar problems in Chrome.
