Jetpack Mobile and inline CSS problem

Well, if you can identify a specific CSS-selector in the mobile theme CSS, you could add that to the “exclude from CSS optimization”-list?

frank

Perhaps I misunderstand, but I don’t think that’s the cause of the problem. I think the mobile theme applies its own CSS, removing all the custom CSS from your default theme. I’ll verify later today, but I imagine the inline CSS is being injected into the mobile HTML page as well and it conflicts with the mobile theme’s CSS. I think the solution would be to prevent the inline CSS from being applied if it’s using the mobile theme. I’m not sure it’s possible to hook into a function somewhere and make the inline CSS conditional, based on whether or not the mobile theme is active?

ah, I think I understand; you’re using “inline & defer” and want to make the inlined part conditional?

that can indeed be done using the “autoptimize_filter_css_defer_inline”-filter. hook a function onto that in which you’d check if the user is on mobile (e.g. based on useragent or evidence of jetpack inline css), in which case you’d just have to return an empty string.

hope this helps,
frank

Thanks, I’m not that familiar with PHP yet but I’ll give this a try and report back with the results! Jetpack has an example on their website on how to check if the mobile theme is active in a function so I think I should be able to get this to work.

OK great, don’t hesitate to report back here!

frank

Well, I’m actually trying this now, but the odd thing is that this:

add_filter(‘autoptimize_filter_css_defer_inline’,’jetpack_mobile_css_defer_inline’,10,1);
function jetpack_mobile_css_defer_inline($inlined) {
$inlined = ”;
return $inlined;
}

does prevent the inline css from being added for the desktop version, but the Jetpack Mobile version still has the inline CSS in the HTML page. I’m trying to figure out why this is happening. Disabling the inline CSS in the admin page does disable it correctly for both desktop and mobile.

That’s pretty weird really. Only explanation would be caching, on some level. When changing an AO setting (disable inline CSS) the AO cache gets purged and it tries to purge the page cache as well, so maybe that explains this behavior?

frank

I suspected caching as well, but I already cleared WP cache and disabled it. The odd thing is that if I disable the inline CSS in the AO options and reload both the desktop and mobile version in Chrome, they both instantly have the inline CSS removed. If I then enable it again, and I include the function above and reload them again, the desktop version doesn’t have the inline CSS, yet the mobile version does.

I now tried setting the inline CSS to an empty string in autoptimizeStyles.php directly right before it gets injected, and doing so does work for both versions. So it’s almost as if the filter isn’t applied when Jetpack loads the mobile theme, if that makes any sense…

How foolish of me. Of course it doesn’t work since I changed the functions.php of my child theme, but Jetpack Mobile uses its own theme with its own functions.php. So my code was never called. If I add the code to the Jetpack Mobile functions.php, it works. Now I just need to figure out if I can make this work without altering the Jetpack Mobile functions.php, but I’m guessing that should be possible in one way or another.

That said, I noticed the mobile version was still loading all the css deferred, despite no CSS being inlined. Adding an else tag to set this->defer to false in autoptimizeStyles.php if the inline code is empty (which it will be) appears to solve this:

if(!empty($defer_inline_code)){
…
} else
{
$this->defer = false;
}

I’m not sure if I can accomplish this with hooks, of if the above would be safe to add in a future update of AO.

ah, that’s a relief.

best thing to do would be to create a mini-plugin and put the code in there instead of in your themes’ functions.php.

As for not loading deferred CSS when on mobile; I’ve just added 2 new filters, one of which (autoptimize_filter_css_defer) allows you to override deferring. that means that you don’t have to unset the inlined_css any more, but that you can simply switch deferring off when on mobile.

you can download that latest version here (I’ll update the version on svn at wp.org soon as well and this will be part of 1.9.3 which I’ll release this or next week).

I haven’t made a plugin yet but I guess this would be a good start! Thanks for adding the new filters. I’m having some trouble getting the latest version to work though, and I’m not sure what’s causing it. I’ll investigate this later.

I’m having some trouble getting the latest version to work though, and I’m not sure what’s causing it. I’ll investigate this later.

ah, that’s weird … given that I was planning to push out 1.9.3 towards the end of the week (well, soon after wp youtube lyte 1.6.0 actually), any info about issues would be greatly appreciated!

frank

Seems like the problem was caused by a closing tag missing for the if-statement on line 329 in that latest version I downloaded.

tiens, in which file specifically draikin?

OK, found it; https://github.com/futtta/autoptimize/commit/2365b2db0e0a6923e7d4075f3eff3e813e9336d9

thanks for reporting!
frank