PS3 Browser Issues and Workarounds

September 16, 2009     

I’m currently working on optimizing a site for the PS3 browser. The amount of documentation out there is sparse to say the least. The only significant article I could find is this one by Robert Giordano (thank you Robert). There’s some good information there, but his comments have a short character limit, so here are my additions:

Space issues with span tags

This may apply to other elements as well. The problem is that PS3 doesn’t respect the space after a closing span tag. So this:

<span>one</span> two

Produces “onetwo”

The fix is to put a space inside the tag:

<span>one </span>two

Prototype dom:loaded event doesn’t work

This is a major thorn in my side because I use this event all the time. My only workaround is to observer window.load instead, but it’s a poor substitute in many cases. If I get a chance I’ll see if I can cook up a fix and submit it to the Prototype crew.

Multiple class selector bug

I haven’t isolated this yet, but I ran into a case where .class1.class2 styles were being applied to all divs of .class2 even if they didn’t have the .class1 applied. I fixed this by changing the declaration to .class2.class1. Kind of scary eh?


Last, but definitely not least. With PS3 in the game, PIE’s clearfix article is most definitely NOT obsolete. The newly advocated overflow:hidden method as described on SitePoint doesn’t work in PS3. Also, the :after method from PIE’s clearfix fails. Fortunately, the last bit used to fix IE5 Mac does the trick:

.clearfix { display: inline-block; }  /* for IE/Mac and now PS3 too! */

I’m including this last bit as-is because it seems to work okay in IE for me even though PIE has an additional bit to revert to display:block for IE. Not sure whether that’s just IE6 (because I’m done caring for reals people) or if my setup doesn’t trigger the problem.