Internet Explorer 10: text size changes itself randomly in Eclipse RAP application

Question

Problem

I have an Eclipse RAP application, and as soon as I change some dropdown box value, random texts became changed in my application. They become bigger. You may need to know, that in Eclipse RAP all styles are inlined and calculated server side.

Steps to Reproduce

I open a tab inside RAP with a page with dropdown lists
Change the dropdown till random texts inside the browser become bigger (usually happens by first trial)

Investigation so far

I checked the JSON ajax request-replies, nothing is related to font change. Actually nothing is related to the tab widget in which I am currently and which has its font changed.
I attached a function to the div representing the tab inside debugger using onpropertychanged event. I log the names of events. When I change the dropdown list and the tab text becomes bigger, there is nothing style.font* in the console. Other things like background color change display the events.
the last thing is hillerious. As soon as I click on inspect, and I "touch" the client area of my application with the mouse, all fonts become OK. So inspecting the problem is impossible:

Question

Did you see something similar ever?
Do you know about known issues for IE, which could cause this?
Is there any workaround?

Update

So the problem is originated from my using custom fonts with @font-face. I realized the followings: - Using web-font kit generated by FontSquirrel does not make any difference. IE loads then EOT (i checked with developer tools), but still the fonts are changing randomly. - I tried a randomly downloaded TTF, same problem occours. - if I remove the fallbacks from the css font definitions, there is no "font-change" phenomen described above - if there is no fallback, IE uses the custom font always, but it seems to have calculation problems when it comes to the width of a text div. For example from my two word menu items only one word is shown (obviously the second word is word wrapped).

Solution

I guess the solution for me is to use native fonts. I don't want to spend my life with hacking around bugs of IE.

Can you show me the doctype of your page? – faby Jun 10 '14 at 12:48 — faby, Jun 10 '14 at 12:48

score 1 · Answer 1 · answered Jun 10 '14 at 12:56

1

My suggestion is to look at this bug report.

From your image I can see that your doctype is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

which triggers quirks (refer here) mode rendering in browsers. So my suggestion is to try to change it.

pages rendered in quirks mode might not be able to take advantage of features the browser supports when using standards mode.

in IE the CSS rules applied when the :hover pseudo selector are not applied when using quirks mode (colour should change and pointer should turn into a hand).

answered Jun 10 '14 at 12:56

faby

7,394
3
27
44

We actually use 2.2 RAP version, so the mentioned bug should not occour. I will however check, how to change the doctype (I have no idea right now). – Gábor Lipták Jun 10 '14 at 13:06
As I can see in your image the doctype is still the same so I thought that the error would be there – faby Jun 10 '14 at 13:09
If I change the document mode to "standards" in the developer tools window, nothing happens. Actually "standards" is the default, not the "quirks". – Gábor Lipták Jun 10 '14 at 13:17
it's very strange.. is there any css rule for hover on elements? – faby Jun 10 '14 at 13:25
According to the bug description, they changed the document type only for IE9 and not for other versions of IE. – Gábor Lipták Jun 10 '14 at 13:25
As I have written, RAP uses server side computed styles, so all styles are inlined. As "google" suggested me, there is no inlined hover. – Gábor Lipták Jun 10 '14 at 13:29
Do you mean the DOM tree saved into a HTML file? – Gábor Lipták Jun 10 '14 at 13:44
yes, the best option would be see page in action but it's impossible. – faby Jun 10 '14 at 13:52
We have custom TTF fonts in the RAP-Branding plugin, and it seems not to happen if I remove the custom TTF fonts. I have to investigate it further. – Gábor Lipták Jun 10 '14 at 14:00
I come back to you later – Gábor Lipták Jun 10 '14 at 14:00