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