Safari 8.0.6 - TypeError: null is not an object (evaluating 'document.body.setAttribute') #289

fephil · 2015-08-17T16:42:52Z

Hi,

I'm having an issue with Safari 8.0.6/OSX 10.10.5 where grunticons won't display and the above error is in the console.

Unfortunately, I'm having problems producing a workable test case but I noticed this live website is doing it and looks to be using the same configuration as mine: http://benjgorman.com

Weirdly on my project, the preview.html is fine and I have checked that the preview.html and my website code is the same.

I have worked around this by putting the grunticon load line at the bottom of the body for the time being.

benjgorman · 2015-08-17T17:24:06Z

What version of grunticon are you using? What's your callback?

beep · 2015-08-18T16:00:41Z

I’m having the same issue in Safari 8.0.8 (OS X 10.10.5), running grunticon 2.2.1. Callback’s set to grunticon.svgLoadedCallback.

benjgorman · 2015-08-18T16:10:55Z

<script>
    /*! grunt-grunticon Stylesheet Loader - v2.1.6 | https://github.com/filamentgroup/grunticon | (c) 2015 Scott Jehl, Filament Group, Inc. | MIT license. */

    !function(){function e(e,n,t,o){"use strict";var r=window.document.createElement("link"),a=n||window.document.getElementsByTagName("script")[0],i=window.document.styleSheets;return r.rel="stylesheet",r.href=e,r.media="only x",o&&(r.onload=o),a.parentNode.insertBefore(r,a),r.onloadcssdefined=function(n){for(var t,o=0;o<i.length;o++)i[o].href&&i[o].href.indexOf(e)>-1&&(t=!0);t?n():setTimeout(function(){r.onloadcssdefined(n)})},r.onloadcssdefined(function(){r.media=t||"all"}),r}function n(e,n){e.onload=function(){e.onload=null,n&&n.call(e)},"isApplicationInstalled"in navigator&&"onloadcssdefined"in e&&e.onloadcssdefined(n)}!function(t){var o=function(r,a){"use strict";if(r&&3===r.length){var i=t.navigator,c=t.document,d=t.Image,s=!(!c.createElementNS||!c.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!c.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||t.opera&&-1===i.userAgent.indexOf("Chrome")||-1!==i.userAgent.indexOf("Series40")),l=new d;l.onerror=function(){o.method="png",o.href=r[2],e(r[2])},l.onload=function(){var t=1===l.width&&1===l.height,i=r[t&&s?0:t?1:2];t&&s?o.method="svg":t?o.method="datapng":o.method="png",o.href=i,n(e(i),a)},l.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",c.documentElement.className+=" grunticon"}};o.loadCSS=e,o.onloadCSS=n,t.grunticon=o}(this),function(e,n){"use strict";var t=n.document,o="grunticon:",r=function(e){if(t.attachEvent?"complete"===t.readyState:"loading"!==t.readyState)e();else{var n=!1;t.addEventListener("readystatechange",function(){n||(n=!0,e())},!1)}},a=function(e){return n.document.querySelector('link[href$="'+e+'"]')},i=function(e){var n,t,r,a,i,c,d={};if(n=e.sheet,!n)return d;t=n.cssRules?n.cssRules:n.rules;for(var s=0;s<t.length;s++)r=t[s].cssText,a=o+t[s].selectorText,i=r.split(");")[0].match(/US\-ASCII\,([^"']+)/),i&&i[1]&&(c=decodeURIComponent(i[1]),d[a]=c);return d},c=function(e){var n,r,a,i;a="data-grunticon-embed";for(var c in e){i=c.slice(o.length);try{n=t.querySelectorAll(i)}catch(d){continue}r=[];for(var s=0;s<n.length;s++)null!==n[s].getAttribute(a)&&r.push(n[s]);if(r.length)for(s=0;s<r.length;s++)r[s].innerHTML=e[c],r[s].style.backgroundImage="none",r[s].removeAttribute(a)}return r},d=function(n){"svg"===e.method&&r(function(){c(i(a(e.href))),"function"==typeof n&&n()})};e.embedIcons=c,e.getCSS=a,e.getIcons=i,e.ready=r,e.svgLoadedCallback=d,e.embedSVG=d}(grunticon,this)}();
    grunticon(["YOURDIRECTORY/grunt/output/icons.data.svg.css", "YOURDIRECTORY/grunt/output/icons.data.png.css", "YOURDIRECTORY/grunt/output/icons.fallback.css"], grunticon.svgLoadedCallback );
</script>

<noscript><link href="YOURDIRECTORY/grunt/output/icons.fallback.css" rel="stylesheet"></noscript>

In your <head> do you both have something like this? You need to copy the line beginning with !function() from your grunticon.loader.js file in your grunt/output folder as it may be different to mine.

fephil · 2015-08-18T16:16:48Z

Sorry for the delay in replying.

Grunticon 2.2.1
Same callback as @beep.

I've confirmed that I am using the exact same code as the generated grunticon.loader.js

benjgorman · 2015-08-18T16:23:44Z

@PJL101 It works placing it in the bottom of the body because I think the error is that your body is not defined when the .js code is executed. I think you should put the code so it executes after the elements are defined, either with a DOM ready callback or place the source under the elements in the HTML.

fephil · 2015-08-20T15:59:12Z

@benjgorman It was my assumption that the loader & call was placed inlined in the head for performance reasons? If this is not true I'll keep the same as what I have done, loader in head and call at bottom of body.

benjgorman · 2015-08-20T16:17:40Z

@PJL101 that's probably true, you'd need one of the developers to confirm it though, I'm not certain.

johnbender · 2015-08-20T16:31:46Z

Sorry all, swamped and hoping to get to this soon.

beep · 2015-09-04T20:06:37Z

Not sure what happened, but the issue seems to have resolved itself: at @johnbender’s request, I returned the loader to its original position in the head, and everything seems fine in Safari now.

Not sure what might have caused the race condition. I’ll report back if I can come up with a better test case, but for now everything seems to WFM.

johnbender · 2015-09-04T20:22:13Z

@benjgorman @PJL101 @beep

I'm going to close this for now, though I don't feel particularly confident in doing so which means we should definitely reopen this if you can help me reproduce the issue.

As a side note there are no document.body references anywhere in grunticon or grunticon-lib, but that statement could simply be a confirmation that I don't understand the original problem.

beep · 2015-09-04T20:24:40Z

@johnbender 👍

If I get a decent test case, I’ll report back. Thanks!

fephil · 2015-09-04T23:30:11Z

@johnbender I can try and produce a test case. I noticed grunt icon has been updated to 2.2.2 so I'll retest with the new version.

johnbender added the bug label Aug 20, 2015

johnbender closed this as completed Sep 4, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Safari 8.0.6 - TypeError: null is not an object (evaluating 'document.body.setAttribute') #289

Safari 8.0.6 - TypeError: null is not an object (evaluating 'document.body.setAttribute') #289

fephil commented Aug 17, 2015

benjgorman commented Aug 17, 2015

beep commented Aug 18, 2015

benjgorman commented Aug 18, 2015

fephil commented Aug 18, 2015

benjgorman commented Aug 18, 2015

fephil commented Aug 20, 2015

benjgorman commented Aug 20, 2015

johnbender commented Aug 20, 2015

beep commented Sep 4, 2015

johnbender commented Sep 4, 2015

beep commented Sep 4, 2015

fephil commented Sep 4, 2015

Safari 8.0.6 - TypeError: null is not an object (evaluating 'document.body.setAttribute') #289

Safari 8.0.6 - TypeError: null is not an object (evaluating 'document.body.setAttribute') #289

Comments

fephil commented Aug 17, 2015

benjgorman commented Aug 17, 2015

beep commented Aug 18, 2015

benjgorman commented Aug 18, 2015

fephil commented Aug 18, 2015

benjgorman commented Aug 18, 2015

fephil commented Aug 20, 2015

benjgorman commented Aug 20, 2015

johnbender commented Aug 20, 2015

beep commented Sep 4, 2015

johnbender commented Sep 4, 2015

beep commented Sep 4, 2015

fephil commented Sep 4, 2015