Problems with sizes due to delayed css insert
ppowalowski opened this issue · comments
Due to delayed css insertion the styles are not applied when other scripts start their work. Especially this causes positioning and offset stuff assuming the site beeing rendered correctly to break.
There should be added some sort of event for triggering stuff after inserted css is loaded.
Example:
offsetLeft = 0 before css is loaded
offsetLeft is > 0 after css is loaded
now when you rely on such a value while positioning elements you have to wait until the css is loaded. But how if there's no event or callback possibility? There should be some sort of "onAdapt".
Startet developing on basis of Dean Edwards custom event solution and ended messing up with IE < 8
Unfortunately, there's not an "onload" for stylesheets. Not one that works reliably cross-browser, anyway. So, there's not a way to have a callback function wait until after a stylesheet loads to fire. You could possibly do some sort of polling, and take action once offsetLeft !== 0 — I know that's not an ideal solution, and I share in your frustration with how rudimentary CSS is.
Concerning the dynamic CSS loading there are several solutions I found so far on the web seeming to be worth evaluating. Biggest trouble seems to be triggering events while xd fetching CSS in older FF.
What about porting Adapt.js to jQuery allowing the usage of the custom callback event engine for triggering some sort of "onAdapt" event? This would possibliy fit the needs of a big group of developers. Unfortunately this would cause further delay due to fetching and parsing jQuery before doing Adapt stuff but should be neglectable.
What do you think? Worth considering?
Another approach could be inserting all the CSS and cause switching by changing classes or by CSS inheritance and overriding - at least for the gs part being responsible for big parts of the positioning in grid based sites. This would achieve the CSS being there and ready instantly, giving a drawback to initial loading times, which could possibly be equalized with reduced request count.
But seems not to be the ideal solution again.
Yeah, that's possible via...
http://adapt.960.gs/test_class.html
In that example, I'm using Adapt.js only for its callback functionality.
thanks.
Due to urgend forthcome in our project (actually omitting adapt.js) I'll evaluate the different possibilities when it comes to reimplementing the responsive functionality. I like the adapt.js aproach an therefore believe in a clean crossbrowser way to split css into different files while not causing positioning bugs or at least giving the right event as starting point for critical script parts.
I can make up an example for testing and working on that issue.
I'll update you on that as I continue my investigations.
I had this same issue with the css not loading until the ready func.. and it looked like crap until then. This is a bit of ahack but it works. Note that it is done without jquery because that library has not been loaded yet at the time we want to execute this.
In the head..figure out the users window width and default to that css file.
var windowWidth = window.innerWidth;
var defaultCssFile = '1200.min';
if(windowWidth < 760)
{
defaultCssFile = 'mobile.min';
}
else if (windowWidth < 980)
{
defaultCssFile = '720.min';
}
else if(windowWidth < 1000)
{
defaultCssFile = '960.min';
}
document.write('');
Now since we gave this link an ID we can easily remove it after load so we don't have to worry about duplicate CSS files. Inside the adapt_config:
callback: function() {
//remove the css referenced by default
setTimeout(function() {
var defaultCss = document.getElementById('defaultcss');
if(defaultCss)
{
defaultCss.parentNode.removeChild(defaultCss);
}
}, 500);
}
the timeout is not necessary but it seemed helpful for IE
@miex0r — If you're literally putting that code in a <script> tag, inside the <head> (not with a src="…"), then you probably ought to just inline the entirety of the minified Adapt.js itself. You'd get the same result. The delay you're seeing isn't due to the speed at which a remote CSS file is downloaded (that happens with all CSS files). It's probably due to the delay of downloading various assets, including adapt.js itself. Embedding the code from adapt.js in a <script> tag inside the <head> will mitigate this.