Browser specific css plugin & WP Super Cache don't match?

[evert100 1]

Hi, Last couple of days working on making my website even more responsive. Check www.edugram.nl So far i made changes for the iphone and android smartphones. Works great. Powerful tool. But... As i activate my caching plugin the body classes delivered are sometimes weird. On the iphone i see body class android. Viceversa i cannot check. Does anyone noticed this and is there a solution? Or is this just something to be ignored. Who has experience with this? It's relevant since you want to keep your speed for download. Cheers, Evert

[Simon 248]

I think wp-super-cache has a mobile option, which basically turns off the cache for mobile devices.

[evert100 1]

Simon, Thanks. So what would be the right setting? Second: are you guys aware of this problem?

[Simon 248]

Well the setting is simply called 'mobile device support' in the super-cache advanced settings. You will need to rebuild the permalinks, just follow its instructions. It isnt a problem, super cache is a page cache plugin, it sends the browser a zipped copy of the cached page before PHP even gets to it. The BrowserCSS plugin changes the classes as the page is rendered but you have opted to send a cached version so if i view the page with an iphone then you see it with an android the the supercache will send the first 'cached' version. Hope that all makes some sense. Anyway, to make it simple, you cant decide to send dynamic content to browsers AND use static page caching.

[evert100 1]

Simon, That makes sense to me. Thanks for your clear explanation. Cheers, Evert

[wworks 0]

What about W3 Total Cache.  Has it broken my browser specific tags?

I have worked hard to apply specific styles for iphone and andriod. Hiding and showing elements. All appears to be fine. but then the next day I look and the elements are all showing again. Margins are misaligned.

Edited September 8, 2015 by wworks
additional info (see edit history)

[Simon 248]

What about W3 Total Cache.  Has it broken my browser specific tags?

I have worked hard to apply specific styles for iphone and andriod. Hiding and showing elements. All appears to be fine. but then the next day I look and the elements are all showing again. Margins are misaligned.

URL to site? 

[wworks 0]

http://Business.louisville.edu

on .mobile the user should not see the 4 boxes ...or the news or events boxes below that.

The browser specific styles used to work. Now it tricks me and works only for awhile after editing it.   Blissfully, I go home only to see the elements reappear the next day.  In desperation, I included duplicating instructions. for example: 

.mobile #boxes{
  display: none;
  visibility: collapse;
  height: 0px;
}

This post thread lead me to believe the Total Cache may be causing the issue.

[Simon 248]

No i think because you are hiding them there is a jQuery error.

Check the javascript console.

[wworks 0]

okay will check.