Skip to Content

The Quirks of Browser Rendering

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: (thank you stack overflow!)

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” 😛 ). So I searched for “IE9 Quirks iFrame” and BINGO… up came this note:

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 😀 .

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

Simon @skemp on Twitter

You must be Logged on to comment or reply to a post.
    • Hi Pratik,

      It took me a few hours to work out what was going on a a bit longer to find the fix. It really helped once I narrowed down the problem and knew enough to construct the right search query (I was smart enough then to at least be asking the right question! 🙂 ).

      Thanks for your interest in this.


      • Hi Simon,

        My personal relief is that it took me only a few minutes to determine the root cause of a WDJ app looking "funny". On the other hand, our new intranet website - non-SAP - does not work in Quirks mode, so we have no real workaround... Really stuck at the moment 😐

        Anyhow, funny again that people stumble over the same sh... at almost the same time.

        Best regards


        PS: "since IE9 the rendering mode is inherited from the parent frame" is not completely true. WD apps use the doctype, and /that/ hinders the quirks mode in an iFrame (see subpage of your reference: That's the solely workaround I can think fof at the moment, but I'm quite pessimistic that removing this would not kill the rest...

        • Hi Detlev,

          Thanks for leaving a comment. The only "workaround" I have seen if you really need to use standards mode in your intranet is instead of embedding the WDJ app you have to open it in a new window (add a link or button to your intranet website) - not great 🙁

          Someone asked me the other day would NW 7.3 solve this problem - I don't think so, since the WDJ app would still require quirks mode... am I right?

          I think this will be an issue until such time that WDJ produces QME compliant markup. This note suggests SAP have been aware of this for over 2 years now it looks unlikely that a fix will be provided. This note says that WDA now supports Standards Mode... but doesn't mention WDJ at all 😥 , perhaps this is one of the consequences of WDJ not being developed any further by SAP.



          • Hi Simon,

            Right, NW7.3 does not change this problem. Anyhow, in our case, it's worse: It's a 6.40 server... (which in IE10 not even looks good in a new tab).

            And yeah, even if I was never a lover of WDJ (not being a friend of generated code), the bad support in areas like this is a mess.

            Shai Agassi is still missing 😐  The day he left (which I remember quite good), I did not think that his influence was so big - but obviously, it was. A man with visions and the power to enforce them.

            Best regards


    • Thanks Sascha,

      Yes it is fun to dig into something like this and satisfying when you work out what the heck is going on! 😆 I learn't heaps in the process too.



      • That's actually one of my soapbox topics - all of today's fat frameworks abstract far too much of the "under the bonnet" stuff from developers. When those abstractions inevitably leak, it's difficult to see what's going on without the kind of work you've done. Great suff mate!

  • Dear Simon,

    Its very helpful, though i tried to dig but i am unable to come out 😀

    I have similar problem.

    I am working on NW 7.31 SP04. We are working on IE9 Compat. mode Browser mode Quirks. All the WDA applications are working fine on portal. When we are integrating it with sharepoint2013 it is giving rendering err popup for all SAP applications. I checked in F12 mode portal page Document mode is automatically changing to IE9 Standards whereas Browser mode is IE9 compat. we cant put meta tag in login page because we are not having login page for sharepoint(LDAP).

    Please suggest.