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
Related
I have a very strange problem that never happen to me. I normally attach css as always and in Visual Studio code or in local file is working perfect. <link href="css/style.css" rel="stylesheet">
But when I host page all css is gone(I try 4 of them). Then I must reload all linked stylesheet to be working again(special extension in chrome). Someone have any idea why this happen?
Edit: As the user suggest, also first try to clear the browser cache, deleting cookies and data, before continuing troubleshooting.
The most common problem causing that issue is the location of the .css file, it depends on how you are hosting the site but perhaps setting an absolute path to the file can help you discard the location issue. Also you are telling something about a chrome extension, did you try loading the page in another browser for troubleshooting?
Useful information: To avoid the problem of caching styles and scripts, it is recommended to use version
<link rel="stylesheet" href="/mydomain.com/css/style?v=1598035492054">
I recommend that you read this article
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
This is by far one of the weirdest things I've seen. I decided to check back on a site I made a while ago, and of course something was off. I now mainly use Firefox and noticed the formatting looked odd. I switched to Chrome and everything looked great. I switched to Edge and everything was wrong again. I inspected element in all three and only in chrome did it show the CSS for each included class in the elements (login button, text entry boxes). In Edge and Firefox, only the CSS for the last class seemed to be included.
The site is https://avonctnhs.org
Does anyone have any idea what is going on here? The classes are set in HTML, there is no JavaScript adding the classes at runtime, etc; just HTML loaded from a file on a server.
Thank you so very much.
Edit: I spent a while searching and the only answers I could find where for people trying to add classes in JavaScript or people with typos that didn't work in any browser.
Additionally, all the code that should be needed should be visible with a nice quick inspect element.
Your CSS files fail to load because your page relies on HTML imports which is not supported by all the browsers.
Your source code has the following lines which should be replaced.
<!-- Additional Headers -->
<link rel="import" href="/core/custom-elements/text-input/text-input.html">
<link rel="import" href="/core/custom-elements/button/button.html">
The above lines can be replaced with the below code which is actually the contents of the above two files.
<script src="index.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
This should fix your issue. Here is an excerpt from MDN which states Firefox doesn't yet support HTML imports.
Firefox will not ship HTML Imports in its current form. See this status update for more information. Until there is a consensus on the standard or alternative mechanisms are worked out, you can use a polyfill such as Google's webcomponents.js.
I noticed recently that something is related to CSS3 and some DOM elements that kind of make ::before and ::after appear in the inspector window. I wonder why they appear there?
The sample is as follows:
Get a Local Copy of Bootstrap
If you can't access Bootstrap from the CDN, you'll need to pull it in via NuGet or your preferred package manager (npm, bower, etc.). This will download the files into your solution so that they don't require any external connections.
Additionally, you can download Bootstrap directly if you would prefer that approach.
Reference the Local File
Once you have it in your solution, you'll just need to reference it by location within the <head> section of your _Layout.cshtml file:
<!-- Point to the location within your solution that Bootstrap is stored -->
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
Or you can simply drag-drop it from your Solution Explorer :
If you are still encountering issues, consider checking the Developer Tools (F12) within your browser and clearing your cache to ensure the latest files are being pulled properly.
TL;DR
I've read through many questions on Stack Overflow on this issue and I've tried to follow the given advice. Still, my CSS stylesheet will not work in Chrome/Safari but it can work in Internet Explorer.
The only odd thing that I can see about my scenario is my server is returning all files as of type application/octet-stream. I cannot change this aspect of the server. Is there something I can do to interpret my CSS file as a stylesheet in Chrome/Safari and IE?
I have an embedded web server project that I am working on. I have very limited control of the server software and the ability to make page-level settings. All I can do is create static HTML, CSS, and image files that are compiled into the server application.
As such, all files that are returned from the embedded server are declared as application/octet-stream in the HTTP header. This produces warnings in Chrome but no errors.
Initially, I had a problem loading this style sheet in Chrome/Safari but it would work in IE. After reading through a couple questions on Stack Overflow, I found that I needed to change my stylesheet declaration from:
<link rel="stylesheet" href="/styles/index.css">
to:
<link rel="stylesheet" type="text/css" href="/styles/index.css">
When I made this change Chrome & Safari still failed to process the CSS file but IE also started to ignore the stylesheet.
Oddly, if I do not declare a DOCTYPE on my HTML document I can get linked stylesheets to work in all of my browsers. This is, however, not a desirable solution.
My guess is this issue has something to do with the HTTP header declaration and that it doesn't match the type declared in the link element.
What can I do to get this stylesheet to work in Chrome, Safari, and IE while following good web development codes-of-practice (i.e. using doctypes on my HTML files and not embedding the style code in the HTML headers?)
For clarity sake, the relevant CSS/HTML code is shown below.
index.css
html {height:100%}
body {margin:0;min-height:100%;position:relative}
iframe {width:100%;height:100%;border:none}
.hdr {min-width:765px;overflow:auto}
.logo1 {float:left;margin:4px}
.logo2 {float:right;margin:4px}
.menu {position:absolute;top:70px;left:0px;bottom:0px;width:175px}
.content {position:absolute;top:70px;left:175px;bottom:0px;right:0px;}
index.htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" href="/styles/index.css"> <!-- Removed the type declaration so that this would at least work in IE9 //-->
</head>
<body lang="en-us">
<div class="hdr"><img class="logo1" src="/images/logo1.png" alt="Logo #1"><img class="logo2" src="/images/logo2.png" alt="Logo #2"></div>
<div class="menu"><iframe name="menu" src="/menu.shtm"></iframe></div>
<div class="content"><iframe name="main" src="/home.htm"></iframe></div>
</body>
FYI, this is a new project that is being developed from an existing one. The original project did not declare a DOCTYPE on the HTML files. Therefore, all page data was loaded and executed in the browser in quirks mode. Furthermore, the index.htm originally consisted of multiple frames within a frameset.
I am trying to update this application, using correct, and up to date methods for developing web pages. I can make this application work, but I feel that this would be at a sacrifice of future-browser compatibility if I have to rely on browser quirks mode and framesets.
I have tried to close the link tag but that doesn't help. Technically, this shouldn't be an issue since this document is declared as an HTML5 document, rather than XHTML.
It's certainly due to the application/octet-stream content type. I can re-create the issue on my end. Soon as the content type is set to text/css your HTML/CSS load fine.
As a workaround you can use <style> tags for you CSS if you can't get the server to send the correct content type.
I hate to have to answer my own question this way but the problem was most certainly with the fact that the server was returning a content type of application/octet-stream within the HTTP header.
After discussing the issue with management we had to update the code associated with the HTTP processor. This is code that is part of a third-party RTOS and we have been extremely hesitant to making any changes to this code.
However, in this case the need has out-weighed that desire. I've integrated the necessary changes to fix the HTTP header to return a content type of "text/css" for cascading style sheets. All is now right with the world.
I think I'll just chime in here. Not to answer the question, but to confirm the issue and perhaps help people with similar problems.
I had the same problem: an external css file was loaded alright, but it was not applied in Chrome. (Safari and FF were ok about it). So, same problem, slightly different cause.
It turned out that because of a bug in the webserver code the HTTP response contained two Content Types, 'text/html' and 'text/css'.
The solution was to remove the faulty 'text/html' line. It seems Chrome is pickier than other browsers about response headers. Which I suppose is legitimate, but a warning would have been nice.
btw, you can see all the http information for a loaded resource in Chrome, when you open Developer Tools, and select Network. Then click on the file that you want to investigate. (it took me a while to find that)
We had a problems with an iframe wich it's contents was updated by an external javascript routine, the CSS were loaded but were not applied. But updating the body HTML from a routine present in the iframe head worked as suposed to.
This same behaviour was not present in gecko and explorer, but happened the same at Safari browser (webkit)
Hope this could give some light in this curious case.
I would like to add one bit of information that may save some of you some time. It appeared that chrome was not recognizing my CSS either. After reading the above post I reviewed the files in the Developer Tools->Network. Turns out that Chrome was using a locally cached version of my CSS. As soon as I refreshed as opposed to accessing the URL again, it worked!
I'm no expert, but i've made this mistake before, it's rather simple.
You've written:
<link rel="stylesheet" href="/styles/index.css">
If this is a folder in the same directory as your index.html file, then you need to remove the first /. like so:
<link rel="stylesheet" href="styles/index.css">
EDIT: I think someone else mentioned this already, but it may have been overlooked.