[#LPP-5370] IE7 DHTML doesn't honor view opacity for stacked (overlayed) views; views disappear instead of changing opacity

OpenLaszlo

IE7 DHTML doesn't honor view opacity for stacked (overlayed) views; views disappear instead of changing opacity

Created: 20/Jan/08 09:56 PM Updated: 04/Nov/08 04:21 PM

Component/s:

Components - all

Affects Version/s:

RingDing (4.1)

Fix Version/s:

MisterDonut (4.2 Final)

Time Tracking:

Not Specified

Severity:	Major
Runtime:	N/A
Fix in hand:	False

Description

« Hide

The following test program demonstrates a flaw in IE7 DHTML with the opacity of stacked views. Consider a shadow view that uses a partial opacity setting underneath another view to create a shadow effect. If the view containing the shadow view changes its opacity, then the topmost view(s) overlaying the shadow disappears in IE7 DHTML:

<canvas width="100%" height="100%" validate="false" debug="true" proxied="false" bgcolor="0x00aaaa">
  <view width="300" height="100">
   <view width="300" height="100" bgcolor="black" opacity="0.3"/>
    <view width="150" height="50" bgcolor="red"/>
  </view>
  <button text="Click me" onclick="canvas.setAttribute('opacity', 0.50)"/>
</canvas>

In this test, the red view and the button disappear in IE7 DHTML when the button is clicked, instead of receiving 50% opacity. This works correctly in Firefox+Safari DHTML and in SWF.

All

Comments

Work Log

Change History

Sort Order:

Ascending order - Click to sort in descending order

[ Permlink | « Hide ]

Max Carlson - 19/Jun/08 10:47 PM

Testcase that shows a workaround for IE 7:
<canvas width="100%" height="100%" validate="false" debug="true" proxied="false" bgcolor="0x00aaaa">
  <simplelayout/>

  
  <view width="300" height="100" name="root">
   <view width="300" height="100" bgcolor="black" opacity="0.3"/>
    <view width="150" height="50" bgcolor="red"/>
  </view>
  <button text="Click me" onclick="root.setAttribute('opacity', 0.50)"/>

  
  <view width="300" height="100" name="container">
   <view width="300" height="100" bgcolor="black" opacity="0.3"/>
   <view width="300" height="100" name="root">
    <view width="150" height="50" bgcolor="red"/>
   </view>
  </view>
  <button text="Click me" onclick="container.root.setAttribute('opacity', 0.50)"/>
</canvas>

[ Permlink | « Hide ]

Max Carlson - 19/Jun/08 10:47 PM

Please make sure this limitation and workaround are documented for IE DHTML.

[ Permlink | « Hide ]

Amy Muntz - 27/Jun/08 01:41 PM

Lou - I added this to the Release Notes. Please close when you finalize the Release notes, with that checkin id.

[ Permlink | « Hide ]

Amy Muntz - 27/Jun/08 01:46 PM

Added to Release Notes. Deferring fix to DingDong.

[ Permlink | « Hide ]

Max Carlson - 17/Jul/08 10:52 AM

This is a documentation issue

[ Permlink | « Hide ]

Lou Iorio - 06/Aug/08 07:16 AM

r10610 | lou | 2008-08-06 10:13:48 -0400 (Wed, 06 Aug 2008) | 17 lines
Changed paths:
   M /openlaszlo/trunk/docs/src/developers/colors.dbk

Change 20080806-lou-h by lou@loumac.local on 2008-08-06 10:09:03 AST
    in /Users/lou/src/svn/openlaszlo/trunk
    for http://svn.openlaszlo.org/openlaszlo/trunk

Summary: dguide, color chapter: add IE7 opacity issues

Bugs Fixed: LPP-5382, LPP-5370

Technical Reviewer: (pending)
QA Reviewer: mcarlson
Doc Reviewer: (pending)

Details: copy the IE7 opacity issues from the 4.1.1 release notes into the dguide

Tests: visual verify

[ Permlink | « Hide ]

Lou Iorio - 08/Aug/08 07:09 AM

Max: for your review