I discovered today that if you enable caching (under Config -> Performance), then "browser-xxx" body classes are no longer rendered on a browser by browser basis. Instead, the first browser to load a page after the cache is cleared will set it, and all other page loads will get that same class, no matter what browser they are running. For example, if I clear the cache, and then load a page in IE7, and then load the same page in FF3, it still says browser-ie instead of firefox3. Any workaround besides just not using Drupal's cache (which is obviously not good)?

Comments

mcrittenden’s picture

Just tried adding drupal_rebuild_theme_registry() to the top of page.tpl.php and that didn't seem to make a difference.

mcrittenden’s picture

Version: 6.x-2.1-beta1 » 6.x-2.0
Anonymous’s picture

Priority: Normal » Critical

This is bad..
I'll remove the code and see if there's a way to fix that.
Thanks.

SteveK’s picture

Version: 6.x-2.0 » 6.x-2.x-dev
Assigned: Unassigned » SteveK
Status: Active » Needs work

Clearing the variables cache will fix this problem for the time being. I'm trying to figure out a better way of doing this though without having to clear the var cache each time.

<?php

  cache_clear_all('variables','cache');
?>

You'll have to rebuild the theme and you can either place this in your template file, in a hook_init() function, or at the top of your page.tpl.php.

Potential solutions would be:

  • asking the user if they'd like these browser classes, then apply them with the cache_clear_all() function if they'd like to use them. Otherwise remove browser classes without any potential performance implications.
  • Remove browser classes all together.

Let me know if this works for you. :)

SteveK’s picture

sorry, the correct code would be:

<?php
  cache_clear_all('*', 'cache_page', TRUE);
?>

note that this will defeat the whole purpose of having page caching enabled to begin with so you're better off turning page caching off.

mcrittenden’s picture

So no fixes? I've been hunting around for a way to selectively remove a certain bit of code from the cache but no luck.

Anonymous’s picture

No luck so far, Steve spend a fair amount of time hunting the same thing with no real result. Still hoping :)

mcrittenden’s picture

Thanks for trying! I'd chalk this up as a limitation with Drupal...maybe an issue should be posted to core so that a workaround is implemented in D7?

SteveK’s picture

Possibly... the main reason for page caching though is to reduce the amount of queries sent to the database. What happens is that the user who initiates the first call has all the classes and html markup saved in a serialized in the database. The next time an anonymous user hits the same page, the user will be presented with that same markup. The work around for this would be to disable page caching or drop the page cache, load up a new page for the user, then set the cache again (which is a tad redundant). Another work around would be to save 6 or 7 version of the cache then serve the correct one depending on the browser type. In my opinion, this would be overkill for just 1 class.

I suggest turning off page caching in the meantime until a stable work around is found.

mcrittenden’s picture

Works for me. Thanks. Can still enable block caching, compression, and CSS & JS optimization anyway, which helps a lot.

SteveK’s picture

I found a JS script that would work for applying a browser class to the body. It depends on JS being enabled but will allow you to turn on page caching if needed.

http://rafael.adm.br/css_browser_selector

SteveK’s picture

Status: Needs work » Closed (fixed)

this has been depreciated in newer versions.

mcrittenden’s picture

Status: Closed (fixed) » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

ericbroder’s picture

I had a similar problem with Drupal page caching making it difficult to add a browser-related body class. I'm using a Zen Sub-theme (not Basic). I decided to use javascript/jquery so that the browser detection is performed outside of the page caching system.

For example:

/**
 * @file
 * Small-screen detection.
 */
$(document).ready(function() {
  
  // Add mobile body class for small screens.
  // http://www.ilovecolors.com.ar/detect-screen-size-css-style/
  // http://drupal.org/node/413482
  if ((screen.width<=854)) {
    $('body').addClass('mobile');
  }

});

See also: How to detect screen size and apply a CSS style.

hockey2112’s picture

I know this thread is old, but I just wanted to say that #15 fixed my issue very nicely. Thanks!