{"action":"created","issue":{"url":"https://api.github.com/repos/filamentgroup/loadCSS/issues/74","labels_url":"https://api.github.com/repos/filamentgroup/loadCSS/issues/74/labels{/name}","comments_url":"https://api.github.com/repos/filamentgroup/loadCSS/issues/74/comments","events_url":"https://api.github.com/repos/filamentgroup/loadCSS/issues/74/events","html_url":"https://github.com/filamentgroup/loadCSS/issues/74","id":87176357,"number":74,"title":"Callback too early","user":{"login":"Krinkle","id":156867,"avatar_url":"https://avatars.githubusercontent.com/u/156867?v=3","gravatar_id":"","url":"https://api.github.com/users/Krinkle","html_url":"https://github.com/Krinkle","followers_url":"https://api.github.com/users/Krinkle/followers","following_url":"https://api.github.com/users/Krinkle/following{/other_user}","gists_url":"https://api.github.com/users/Krinkle/gists{/gist_id}","starred_url":"https://api.github.com/users/Krinkle/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Krinkle/subscriptions","organizations_url":"https://api.github.com/users/Krinkle/orgs","repos_url":"https://api.github.com/users/Krinkle/repos","events_url":"https://api.github.com/users/Krinkle/events{/privacy}","received_events_url":"https://api.github.com/users/Krinkle/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/filamentgroup/loadCSS/milestones/3","html_url":"https://github.com/filamentgroup/loadCSS/milestones/1.0.0","labels_url":"https://api.github.com/repos/filamentgroup/loadCSS/milestones/3/labels","id":1269794,"number":3,"title":"1.0.0","description":"Issues to wrap for 1.0.0 release","creator":{"login":"scottjehl","id":214783,"avatar_url":"https://avatars.githubusercontent.com/u/214783?v=3","gravatar_id":"","url":"https://api.github.com/users/scottjehl","html_url":"https://github.com/scottjehl","followers_url":"https://api.github.com/users/scottjehl/followers","following_url":"https://api.github.com/users/scottjehl/following{/other_user}","gists_url":"https://api.github.com/users/scottjehl/gists{/gist_id}","starred_url":"https://api.github.com/users/scottjehl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/scottjehl/subscriptions","organizations_url":"https://api.github.com/users/scottjehl/orgs","repos_url":"https://api.github.com/users/scottjehl/repos","events_url":"https://api.github.com/users/scottjehl/events{/privacy}","received_events_url":"https://api.github.com/users/scottjehl/received_events","type":"User","site_admin":false},"open_issues":2,"closed_issues":6,"state":"open","created_at":"2015-08-24T16:33:48Z","updated_at":"2016-01-27T21:19:43Z","due_on":"2015-09-08T05:00:00Z","closed_at":null},"comments":14,"created_at":"2015-06-11T01:58:35Z","updated_at":"2016-01-27T23:09:20Z","closed_at":null,"body":"The old `onload` callback worked fine (it's called when the styles are loaded and applied). However the new `onloadCSS()` callback fires too early.\r\n\r\nE.g. loading a stylesheet with `#foo { display: none; }` and asserting `getComputedStyle(document.getElementById('foo')).display === 'none';` fails with the `onloadCSS()` callback, but passes with the `onload` callback.\r\n\r\nAfter some trial and error, I determined that this is caused by the `ss.media = \"only x\";` trick. While loadCSS's internal callback that changes the media value does run first, the second instance of the poller from onloadCSS() invokes the callback at a time that the styles are not yet live.\r\n\r\nRemoving the `ss.media` hack and its first callback counterpart fixes the issue."},"comment":{"url":"https://api.github.com/repos/filamentgroup/loadCSS/issues/comments/175905599","html_url":"https://github.com/filamentgroup/loadCSS/issues/74#issuecomment-175905599","issue_url":"https://api.github.com/repos/filamentgroup/loadCSS/issues/74","id":175905599,"user":{"login":"scottjehl","id":214783,"avatar_url":"https://avatars.githubusercontent.com/u/214783?v=3","gravatar_id":"","url":"https://api.github.com/users/scottjehl","html_url":"https://github.com/scottjehl","followers_url":"https://api.github.com/users/scottjehl/followers","following_url":"https://api.github.com/users/scottjehl/following{/other_user}","gists_url":"https://api.github.com/users/scottjehl/gists{/gist_id}","starred_url":"https://api.github.com/users/scottjehl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/scottjehl/subscriptions","organizations_url":"https://api.github.com/users/scottjehl/orgs","repos_url":"https://api.github.com/users/scottjehl/repos","events_url":"https://api.github.com/users/scottjehl/events{/privacy}","received_events_url":"https://api.github.com/users/scottjehl/received_events","type":"User","site_admin":false},"created_at":"2016-01-27T23:09:20Z","updated_at":"2016-01-27T23:09:20Z","body":"okay, I think I have a fix ready for testing. \r\nThe new test page is the same as the original test posted in this issue, except that it uses loadCSS.js from master, and onloadCSS.js from branch 126 (which is tweaked a bit to play nicely with loadCSS's onload event handler). Also, the test's own scripting is moved to the end to work now that loadCSS is defined via an iife.\r\n\r\nOriginal Failing Test: http://codepen.io/Krinkle/pen/qdjVJV\r\nNew Passing Test: http://codepen.io/scottjehl/pen/eJrBQw\r\n\r\nScripts involved: \r\nloadcss.js from master: https://github.com/filamentgroup/loadCSS/blob/126/src/loadCSS.js\r\nonloadcss.js from branch 126: https://github.com/filamentgroup/loadCSS/blob/126/src/onloadCSS.js\r\n\r\n\r\nIf this tests out well across browsers, we'll just want to include a unit test before merging and closing out. Feedback appreciated, thanks!\r\n"}}