[****GO TO END OF THE POST TO SEE THE UPDATED PART****]
Peace be upon you!
We have a huge HMI and SCADA web application which provides data collection facility from almost any plant floor and provides visualization and analysis facility over it.
The product is based on three technologies. Front end and server side is in JS, JAVA and database engines are in C++ connected via JNI.
In the front end, we have practically used HTML, CSS and JS to create our own windowing environment. Every window is an iFrame in which we dynamically load an applet. So the web application runs Java applet code in HTML iframes in a windowing environment with all the windowing environment features applied (like dragging, closing, opening multiple windows etc)
The product has been running absolutely perfect in IE9 and earlier version. However, as soon as we upgraded IE 10, we have been facing serious problems. Some are related to functions/properties in JS that are not supported in IE10.
Majorly we digged and fixed these issues in IE10:
Many methods are no more accessible without 'this' pointer in JS: We added 'this' pointer to resolve it
element.getAttribute("style") is not supported in IE10. We used the alternative document.style to get it done
However, after these small fixations, we have ommitted all the JS/HTML exceptions but the web page doesn't display itself properly. We consultant MSDN IE 10 compatibility cookbook and a lot of other forums to understand that if a webpage isn't following standards, then the possibility of the webpage not displaying itself correctly is high as IE10 imposes strict standards.
We added doctype and metainf tags in all HTMLs so that our browser mode in F12 developer tools is IE10 and document mode is IE9 standards but still no improvement.
Its been around a month we are searching on this issue. Reading documents, support, and problems with IE10 but couldn't really locate the real problem.
Desperately seeking help.
Thanks in advance.
Page should be displayed as follows:
http://www.flickr.com/photos/zakiimtiaz/8701914114/in/photostream[
^]
Page displayed incorrectly is as follows:
http://www.flickr.com/photos/zakiimtiaz/8700789569/in/photostream[
^]
Same question asked at
http://stackoverflow.com/questions/16274535/cant-open-display-my-web-application-properly-in-ie-10?5[
^] but couldn't really help. See comments on this page for more information.
****UPDATED PART HERE****
Interestingly, I have worked this example by braking in it a very small part and found out the problem.
In IE10, if an <iframe> is present inside a , the height width attributes of an Iframe given in percentage doesn't pay much heed to the height width of its parent.
Like in the following example, iFrame with the id 'test' takes height width = 100%. While its parent's height is 1px. *When you run this in IE10, the frame appears to be very large in height and shoes anomolous behavior*
<HTML>
<HEAD>
</HEAD>
<BODY id="WESWinDesktop" >
<table id=WESStructure width="100%" height="100%" border="2" cellpadding="0" cellspacing="0">
<tr>
<td id="WESMainWinTitleBarCont" height="1px"> this is 'td' for iframe
<iframe id="test" src="" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
</td>
</tr>
<tr>
<td id="WESMainWinMenuBar" height="20"> menu bar
</td>
</tr>
<tr>
<td height="100%" >content
</td>
</tr>
<tr>
<td id="WESMainWinStatus" height="20"> status bar
</td>
</tr>
</table>
</BODY>
</HTML>
I have tried the same thing by putting a
instead of a
but the behavior is the same. So I guess there is something wrong IE10 interprets width height attributes of an iframe.
Much Help needed guys!
Thanks in advance. |
Submit an article or tip