I am using firefox 52.3.0 and planning to develop using web components(Polymer 3.0). I am looking for polymer 3.0 polyfil that works in firefox.
I tried webcomponents-lite.js (worked partially - did not support es5 polymer)
I tried webcomponents-bundle.js (ddnt workd)
I even added the es5-adapter.js from #webcomponents repositories, they just didnt work for firefox. It worked in Opera and Chrome(which didnt need the polyfill) but never on firefox.
I know youtube is built entirely on polymer and I can access it (even inspect the elements) so well within my mozila firefox, which tells me there is a polyfil that works. I am jut not able to find it.
PS: I would love to be able to use these polymerElements with react-js, I know its possible, but I dont know how yet. can someone please tell me how?
Okay, that sounds odd. And Opera does not need any polyfill because they have all the standards already shipped natively.
One thing you can try is that make an ES6 web component, and get ES5 web components from Polymer bundling. Check out the official docs: https://www.polymer-project.org/3.0/toolbox/build-for-production#compile
Polymer 3.x and the Polymer Elements are written in ES6 (also known as ES2015). To allow older browsers to render your apps, compile your code to ES5.
When you compile your code to ES5, the Polymer build tools will inject the custom-elements-es5-adapter.js polyfill into your entrypoint so that ES6-capable browsers can still render your ES5 code.
#Binh helped me and pointed me to the right direction, which got me to the firefox polyfills as below
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Template Polymer 3.0 App">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="theme-color" content="#fff">
<script src="./node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js" async></script>
Yes, only webcomponents-loader.js I hope this helps someone who comes looking
Related
Font Awesome 4.2.0 renders perfectly in Chrome, Firefox, Safari, Opera, and Internet Explorer 11 (but only with Compatibility Mode turned "Off"). With Compatibility Mode turned "On" no glyphicons render. I've tried using a tried-and-true Font Awesome 4.2.0 CDN that I've used in other projects, using the Font Awesome CSS, and adding the <meta http-equiv="X-UA-Compatible" content="IE=edge"> in the <head> as suggested from a GitHub post to allow the glyphs to render with Compatibility Mode turned "On". None of those solutions work and having Compatibility Mode turned "Off" is not an option for this project. So, in conclusion, my question is this. How can I have Font Awesome 4.2.0 render in Internet Explorer 11 with Compatibility Mode turned "On"?
Found the solution. <meta http-equiv="X-UA-Compatible" content="IE=edge"> needs to be placed as the FIRST tag in the <head> in order for it to work. Hope this helps anyone else who has this issue!
I had this issue with IE 11 on my development machine (but not elsewhere). My Internet Options were set to not allow Font downloads. Probably won't be common, as I'm on Windows Server, but if so try this to fix it:
[Gear] >> Internet Options >> Security >> Custom Level >> Downloads >> Font Download >> Enable
I have also faced same issue. In my case, below fix works :
Firefox (and, to a lesser extent, Chrome and IE) has an issue where it fails to download the font and so doesn't display any of the icons correctly.
A very easy fix has been identified in a number of locations, cdnjs/cdnjs#755 being one of them.
The fix is to add the following to the start of the font-awesome.css file (before the #font-family call):
Header set Access-Control-Allow-Origin "*"
Source : https://github.com/thingles/foreground/issues/222
I faced the same Issue and I just added the following Link in the Tag and it worked.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Hope this helps!
In my case it was a display: table set on the element. Removing it resolved an issue.
Look into removing the version tags from the end of the files. Those tags cause IE to have fits.
change this...
../fonts/fontawesome-webfont.eot?v=4.3.0'
to this...
../fonts/fontawesome-webfont.eot'
The page is at http://5heurescod.tk. Please inspect the source to see what I could have done wrong.
It works well on Chrome but not on firefox.. Did I forget to import something?
(edit: when I say it doesn't work, I mean that the menu on the left is not clickable and the javascript function getCard(); which should be called at start is not called.)
I used
bower install --save Polymer/polymer
bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements
Any idea? Thanks!
At a glance, I'd say:
make sure the web components polyfill (webcomponents.js, formerly platform.js) is loaded first, certainly before any HTML imports, since this includes the polyfill for HTML imports.
wait for the polymer-ready event before manipulating any of the DOM or setting CoreStyle properties. You might be able to get away with this on Chrome, because native HTML imports work a little differently -- but definitely not on Firefox or any browser without native HTML imports.
See: https://www.polymer-project.org/0.5/docs/polymer/polymer.html#polymer-ready
In my case I had all the imports in an elements.html (including the webcomponents.js). I moved the script tag from the elements.html to index.html and it worked. I put the script tag right before importing the elements.html. The resulting index.html was:
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="bower_components/webcomponentsjs/webcomponents.js">
</script>
<link rel="import" href="elements.html">
<link rel="stylesheet" href="css/core_toolbar.css">
</head>
html imports are not supported by Firefox, visit https://www.polymer-project.org/0.5/resources/compatibility.html
And platform.js i no longer used, now you should include firstly webcomponents.js, visit https://www.polymer-project.org/0.5/docs/start/platform.html
I had same problem with Firefox,
I recommend you to use the polyfill webcomponents-lite.js rather webcomponents.js which has some issue with smartdevices.
As it is said in https://www.polymer-project.org/1.0/docs/browsers
We recommend using the webcomponents-lite.js version of the polyfills
with Polymer 1.0+. This version is designed to be used with Shady DOM,
and does not contain the full Shadow DOM polyfill.
Although the full webcomponents.js polyfill works with Polymer 1.0+,
we do not recommend using it. This version contains the full Shadow
DOM polyfill, which is known to have high performance overhead.
You need also to pay attention for the tag link which does not work inside your webcomponent, in that case just move it to the page which hostes the webcomponent.
For me, it was the fact that I was loading webcomponents-lite.min.js, instead of the full version, webcomponents.min.js.
Its all about browser support for web components.
Where browser's native support is not available for web components, then this pollyfills under "bower_components/webcomponentsjs/" Either of "webcomponents.js" or "webcomponents-lite.js" is needed.
See: https://www.polymer-project.org/1.0/docs/browsers
I'm trying to create an offline-web app and my cache.manifest file is
CACHE MANIFEST
http://www.page.com/index.html
http://www.page.com/d3.js
http://www.page.com/list.csv
NETWORK:
*
And the beginning of my html is html manifest="cache.manifest"
To format the app and make it run full-screen, I included this tag in the header:
<meta name="apple-mobile-web-app-capable" content="yes" />
But doing that and running it from the homescreen will result in the app failing, and requesting an internet connection.
If you take that one line out and run it from the homescreen, it will open in safari with the url bar and everything, but the app will run correctly.
I've seen this problem discussed in a couple places such as here and here, but never with any working solutions or explanations.
Does anyone know why this is or how to avoid it? Thanks in advance.
<meta name="viewport" content="width=device-width, minimal-ui">
For iOS 7.1, this works as a superior alternative.
I've been using CSS3 Pie on my site with great success. I recently had a Jotform form with a custom CSS button with radius, Pie doesn't work with Jotform so I came across this meta tag
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
which when added to the particular page resolved the radius issue in IE8.
My question is this, if it's this simple to allow older versions of IE to render modern CSS can this tag be utilized as default and if not why not i.e bad practice, technical reasons etc.
It seems to good to be true so I'm guessing there has to be a reason, I'm aware it doesn't validate but to avoid this it can be added to an .htaaccess file.
This meta tag is needed to prevent IE8—10 from switching to Compatibility mode (which means more or less emulation of the IE7 renderer). In most cases, it's a good practice to use the latest available rendering engine, so it's better to keep this meta tag.
Also, be sure that pages have the proper Doctype (<!DOCTYPE html> will be enough for almost all practical applications), so other browsers also could display them using the newest rendering mode, according to the latest standards that browsers can support.
!-- Force IE to use the latest version of its rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
The above meta tag is used to force IE to use the latest version of its rendering engine.
In case if user opens in IE8 browser with IE8's default rendering engine? This will certainly fails. Therefore it is good to use CSS3PIE along with this meta tag.
You can check this in MSDN Library.
I was googling, about how to fix compability problem ....
and i get this to force ie8 to latest version ie
<meta http-equiv="X-UA-Compatible" content="IE=edge;/>
in my mind ...
is it posible to force any user agent.
let say from any browser to firefox
example <meta http-equiv="X-UA-Compatible" content="FF=edge;/> or else
Heh, clever thjnking! :) But no, this is not possible.
The X-UA-Compatible header is proprietary, and can be used only to switch between various versions of the same browser engine (At the moment, it is supported only by IE, as far as I know).
You'll have to go the hard route and adjust the CSS so it works in all browsers (or serve different style sheets for different browsers).
As far as I know this line works also for non IE browsers, for example you can use something like this
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
to force the use of Chrome rendering if available, or the last verison of IE of not. This code is completely valid but I'm not 100% sure what it means and what it really does :)
I have done some google research but I haven't found nothing concrete about it so I think is not a good idea relying only on this line of code for cross-browser compatibility. Personally I insert this code on my sites because it can do no harm :)
Hope it helps.