new

## IE detection and opacity

Reported by Jared Fedorchuk | October 19th, 2011 @ 08:51 AM

Since browser detection is used for the getStyle and setOpacity functions you run into problems with IE 9 when using the scriptaculous fade/appear affects.

It seemed to me that IE9 was using the filter\alpha and regular opacity which was causing problems. I made it so it would only modify the opacity property.

I fixed it for my purposes by changing line 2539 from

else if (Prototype.Browser.IE) {


to

else if(navigator.appVersion.match(/MSIE\s+(?:6|7|8)\./)) {


and line 2742 from

else if (Prototype.Browser.Gecko && /rv:1\.8\.0/.test(navigator.userAgent)) {


to

else if (Prototype.Browser.Gecko && /rv:1\.8\.0/.test(navigator.userAgent) || document.all) {


### Comments and changes to this ticket

• #### FjanAugust 15th, 2012 @ 04:48 PM

In the beta for IE10 the old way of doing opacity doesn't work at all anymore, and I can confirm that the above changes fixes opacity for both IE9 and IE10.

• #### FjanAugust 15th, 2012 @ 05:02 PM

By the way, if you're implementing this it is better to create a new entry in the browser detection login. That way the result gets cached instead of the browser having to do a regexp match on every style change. For example, insert after line 18:

IEold:   !!window.attachEvent && !isOpera && ua.match(/MSIE\s+(?:6|7|8)\./),


And then replace line 2539 with:

else if (Prototype.Browser.IEold) {

• #### Nicolas MartenetSeptember 6th, 2012 @ 09:30 AM

The issue I face with the new Prototype 1.7.1 with IE is that the return value of getOpacity() is inconsistent.

If the IE browser support css opacity (like IE9) then the return value is a string when for other browser it returns a number.
This string implies that operation done by scriptaculous doesn't work anymore. For example the Effect.Opacity from 1 to 0.7 will set an opacity of 0 due to adding the string instead of a number.

The following fix could solve the issue.

Actual code (getStyle_IE - line 3090):

if (style === 'opacity' && !STANDARD_CSS_OPACITY_SUPPORTED)
return getOpacity_IE(element);


Proposed fix:

if (style === 'opacity') {
if (!STANDARD_CSS_OPACITY_SUPPORTED) {
return getOpacity_IE(element);
} else {
value = value ? parseFloat(value) : 1.0;
}
}

• #### FjanSeptember 6th, 2012 @ 10:12 AM

Thanks for alerting me to the fact that there is a new prototype, I was still on 1.7.0. Mostly fixed now thanks! I still see some small inconsistencies in IE9 when using Scripty, probably due to what Nicolas is referring to above.

• #### JoeJanuary 10th, 2013 @ 12:09 AM

Nicolas thanks so much, the fix you proposed solved an issue that was driving me crazy. It would be great to see this added to the base.

• #### SithuMay 4th, 2013 @ 06:30 AM

Thanks to Nicolas. It did solve the opacity problem of IE 9+ in prototype 1.7.1 (the latest version).
Hopefully it will be added in the next minor version.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.