Sunday, February 28, 2010

Fixing Facelets/XHTML corrupted page issues in Google Chrome

I had a problem for quite some time on a web site being shown corrupted in Google Chrome. On the original HTML page everything was working great. On the resulted JSF/Seam/Facelets produced page, things were looking corrupted. The problem appeared only on Google Chrome. In other web browsers things look good. When I made a diff on the original working page and the page generated by JSF/Seam/Facelets, there was no difference. But still, page was corrupted on Google Chrome. After some investigation I noticed that Google Chrome was showing the page corrupted, simply because the generated page was not setting content type of: text/html. Google Chrome, unlike the other browsers, was probably sensitive to this issue. The solution to this problem is very simple. Just add to your JSF view tag the property: contentType. If your IDE (for example, IntelliJ) marks the contentType as unrecognized, ignore it. It runs ok. Here is an example of how the contentType is used:
<f:view contentType="text/html" />
Note, that you don’t have to wrap the view tag on all of your page, if you are using Facelets (the view tag is not mandatory in Facelets), so just putting the view tag is enough (like in the example).

8 comments:

  1. Is there anything working smoothly in JSF or everything is a patch over a patch to make things work.
    Maybe it's about the time to progress to PHP ?

    ReplyDelete
  2. If you are using PHP and you wouldn't set the content type to: text/html you would get exactly the same behavior in Google Chrome. Your argument may be right, but not so much related with this post...

    ReplyDelete
  3. It worked perfectly for me.
    I was driving crazy because of that error.

    Thanks you so much!!

    ReplyDelete
  4. Thanks for the hint, been struggling for hours to determine the root cause for the Chrome rendering issues I encountered.

    ReplyDelete
  5. Thanks for the tip.
    I was looking for the solution since several months ago.

    ReplyDelete
  6. This tip also works in other webkit based browsers, like Apple Safari/iPhone/iPad

    ReplyDelete