I'm currently building a website using Polymer
framework and Jekyll
. I've added the Disqus
block in the bottom of the page and it works perfectly in Chrome
browser.
{% if site.disqus %}
<div class="comments">
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = '{{ site.disqus }}';
var disqus_identifier = "{{ page.url }}";
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
{% endif %}
But when I open it on Firefox 35.0.1
I receive the following message in console:
TypeError: Argument 1 of Window.getComputedStyle does not implement interface Element.
and Disqus
comments don't load. I've found the same behavior for Disqus
comments on Polymer docs website, so you can check it out. Any ideas how it can be fixed? Or this is a bug?
I was running into this exact issue, and came across this thread:
https://github.com/webcomponents/webcomponentsjs/issues/89
Mikanoshi provides a helpful gist at the end of the thread that illustrates a fix:
var disqus_shortname = ''; /* Your shortname */
var DISQUS = ... /* From the start of DISQUS' embed.js */
(function(document) {
DISQUS.define(... /* The rest of DISQUS' embed.js */
})(wrap(document));
Unfortunate that we have to modify DISQUS' embed.js, but it seems to work!
An explanation of why this is necessary is here: http://webcomponents.org/polyfills/shadow-dom/ (under wrap and unwrap).
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments