The Quirks of Browser Rendering

[Former Member]

In this post I would like to describe a recent problem I came up against when trying to embed a Web Dynpro Java (WDJ) application into another website. This is quite a common scenario where you have a leading portal in your organization (e.g. SharePoint or some other Intranet/Internet site) and also an SAP Portal or perhaps other SAP web applications (like Web Dynpro) and you want to present the user with a integrated view so they can see everything on the one page. So you embed (usually via an iframe) the SAP web application into the leading portal page.

Let me start by describing the typical situation and also showing you the problem I was facing...

So I had a new website that was embedding some Web Dynpro Java applications directly into it using an iFrame. It worked OK with Chrome, with Firefox it told me that "Web Dynpro isn't supported" (that's another issue) but in IE9 strange things were happening... the WDJ app seemed to load OK in the iFrame but when you would click on the input field of the form the field would shrink to be really really small and you could not see what you were typing in it. (see the video below to understand this better).

First I thought this was some sort of styling issue or JavaScript problem with the "onfocus" method of the input field, so I played around with different scenarios and tried to debug using the developer tools in IE and Chrome to see what was going on... I wasn't really getting anywhere, I could see the standard SAP JavaScript libraries doing something on the onfocus event of the input field (i.e. when you clicked on the input field to put the cursor in the box and start entering something) but it wasn't really helping me out... I was stuck.

I then decided to write a little test program, I fired up NWDS and created a very simple Portal Application that was basically a JSP page with an iFrame that embedded a simple WDJ application - this was the same scenario as with the standalone website so I expected the same result. When I ran it I was surprised to see that it worked fine, no weird shrinking input field... humm so what was different?

I then ran both scenarios side by side and used the IE developer tools (press F12) to look in more detail. What I noticed was that for my standalone website the browser was using so called "Standards Mode" to render the page, but for the portal component I wrote it was using "Quirks Mode"... I had read a little about Quirks mode before and knew that it had something to do with IE rendering web pages for backward compatibility, but I needed to do a bit more reading. Quite quickly I found a reference to how IE9 determines what rendering mode to use and how it applies that mode to embedded pages (e.g. iFrames). Here are some of the pages I found:

http://stackoverflow.com/questions/3717932/will-an-iframe-render-in-quirks-mode (thank you stack overflow!)

http://msdn.microsoft.com/en-us/library/gg558056(v=vs.85).aspx

So it turns out that since IE9 the rendering mode is inherited from the parent frame, so what was happening in my case was that since my standalone website was triggering the browser to use Standards Mode that was then inherited by the WDJ app that was embedded in the page and the WDJ app doesn't like standards mode it needs Quirks mode.

Now that I sort of knew what the problem was I jumped onto SAP Support and searched for any notes related to this. Now at least I knew enough to do a decent search and construct some decent search terms, before I had just been guessing ("Funny Input field error" :razz: ). So I searched for "IE9 Quirks iFrame" and BINGO... up came this note:

https://service.sap.com/sap/support/notes/1590563

This note described the exact issue and does a good job at it and even provides a work around of sorts. By putting the following tag into the parent page you can tell the browser to use a different rendering mode.

<meta http-equiv="X-UA-Compatible" content="IE=Emulate8">

This of course means that if you really need standards mode for your page this work around doesn't really help. In my case I tried this out and it worked.

Here is a little video that shows the problem and the solution

I wanted to share this with the community in case anyone else has a similar issue and also just to make people aware that browsers have different rendering modes and it is not obvious which mode the browser has selected to render the page. By using the right tools, digging a bit deeper and writing my own test program I managed to work out what was going on, get enough knowledge to ask the right questions and found an SAP note that explained exactly what was happening.

Hopefully as time goes by all the SAP web technologies will support standards mode and we can say goodbye to quirks for good :grin: .

Thanks for reading this. Please share your views, opinions and insights below.

Simon @skemp on Twitter