Transparency in Internet Explorer

It seems that transparency isn’t working in Internet Explorer 10 (Windows 8.1; same problem in other versions of IE I have tested). A number of different components have this issue (e.g, canvas, textfield, and others). Backgrounds set to transparent (in styles or via code) show up as solid white. This is not a problem in other browsers.

Transparency of png graphics does seem to work but I don’t want to convert all textfields and canvas components to png just to get transparency for IE.

The only information I can find about this is that IE requires a layout (read here). If it doesn’t have a layout, it just ignores some CSS elements. Is this the problem? If so, is there a way to fix it that works in all browsers?

If you can’t replicate the issue, I will post an example.

Please file a bug report in Feedback and include that link.

Created case #34682.

Also, it’s IE11 I was using, not IE10.

Need a temporary workaround for this issue that works in all browsers. I tried using ExecuteJavaScript in the Shown event for WebTextField. Neither of these work:

me.ExecuteJavaScript(me.ControlID+".style.backgroundColor = ‘transparent’; ")


me.ExecuteJavaScript(me.ControlID+".style.background= ‘none’; ")

I am hoping someone can come up with something that does work.

I haven’t had a chance to look into your Feedback case yet, but it’s certainly possible that IE doesn’t allow this. I read the article that you pointed to and I came away with two things:

  1. There’s no mention of transparency in that article, in fact, they’re specifically talking about “dimensional bugs” which have to do with where controls appear.
  2. We position things using absolute positioning so that you can determine where things go in the Xojo Layout Editor. It is unlikely that this will change.

Under certain circumstances an Image Well could replace a canvas. And they are transparent in IE.

WebLabels are transparent. A workaround for transparent textfields would be to use a WebLabel with a border to display text as a “false” TexField. When the WebLabel is clicked to edit its content, a real textfield over it becomes visible so text can be edited. Text is copied to the WebLabel underneath in TextChange. When focus is removed from the TextField, it becomes invisible again.

Just ideas…

Here is a small project that implements the idea of the “transparent text field” I talked about :

When run, the label looks as a transparent text field. When clicked into, it reveals the TextField over it where the user can edit text. As soon as focus is taken away, for instance by clicking anywhere in the window, the field reverts to transparent.

I tested this with IE11. To make that control usable with all browsers, check the type of browser and if not IE, make TF visible as default.

It is a beginning…

WebLabel works. Perfect! Thanks. I need to familiarize myself with ALL of the components in Xojo.

I discovered that if you try to use the Background property in the style, then the WebLabel also shows up as non-transparent. Since WebLabel is transparent by default, this property does not need to be set in the style.

Also, this line in shown event does work but it is not needed and is also not wanted because the background is briefly non-transparent:

me.ExecuteJavaScript(me.ControlID+".style.background= ‘none’; ")

Again, this only happens in IE11. So, it seems like IE11 has a problem with background property in style.


{ background-color: transparent;}

works in all known browsers for a WebTextField (including IE 10), it will fail for IE11. IE11 has a known CSS Opacity bug because Microsoft ‘fudged’ the AutoScaleDPI settings in the update. There are work-arounds system-side to fix the issue, but in a deployment environment, it would be a nightmare. Only ~9% of the web is browse by IE :slight_smile:

Another cross-browser work-around is the filter css tag.

This ‘should’ work in IE11

Another interesting statistic from the same source is that about a quarter of those IE users are still using IE 8…!

That is just about the same as Mac OS X.

I would not call close to 10% negligible.

The issue is to find strategies that work to identify IE11 with WebSession.Browser and serve its users the proper code for them to have a good experience.

I had no idea IE (and IE11) was so low but I believe in my target population the numbers would be much higher. Thanks for the information.

That number is bound to increase anyway, as new machines come with Windows 8 including IE11 as default. I believe the still high proportion of IE 8 simply reflects the state of the Windows installed base where XP still accounts for 35% or so.

[quote=117643:@Matthew Combatti]Another cross-browser work-around is the filter css tag.

This ‘should’ work in IE11[/quote]

It sets the entire field transparent, including the text, so all become invisible …

Here is the solution, which I verified to work in IE 11.0.9600.17207.

Add this to App.HTMLHeader :

<style> input[type="text"] { background-color: transparent} </style>

The TextFields become transparent. Of course, you do not want to apply a Xojo style, it would ruin it. Unless you want a particular TextField another color.