Closed Bug 397736 Opened 14 years ago Closed 13 years ago

Firefox Drag + Overflow + Opacity Rendering Issue


(Core :: Layout, defect)

Windows XP
Not set





(Reporter: rudy.harjanto, Unassigned)




User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv: Gecko/20070914 Firefox/
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv: Gecko/20070914 Firefox/

Ok, I have been trying to implement a semi-transparent draggable box, that has a content area with a fixed height + overflow (scroll / auto).

Firefox has problems rendering the content that shows through the semi-transparent overflowed div. If opacity is set to 100%, then the issue no longer visible which I guess constitutes a possible solution, but if you want the draggable box to have any transparency then there is a problem. Removing the overflow rule, or setting it to visible or hidden stops the rending issue.

Here is a demo page:

Drag the box around the page by the red drag handle and the content underneath is distorted as you drag. There are links on the demo page to change the overflow settings so you can see the box working correctly.

I have tested this same scenario using jQuery + Interface and the same thing occurs in Firefox, so it's something to do with Firefox's rendering engine. IE has no problems rendering the box as it is dragged regardless of the overflow setting.

Has anyone encountered this problem or found a workable solution? 

Reproducible: Always

Steps to Reproduce:
1. create opaque draggable div, set overflow to auto
2. drag the div over text
3. note distortion
Actual Results:  
distortion, performance hits

Expected Results:  
If overflow of div is set to hidden, there's no distortion. 

overflow auto should do the same
Severity: normal → critical
Version: unspecified → 2.0 Branch
Component: General → Drag and Drop
Product: Firefox → Core
Version: 2.0 Branch → unspecified
OS: Windows XP → All
Hardware: PC → All
Component: Drag and Drop → Layout: View Rendering
Component: Layout: View Rendering → Layout
QA Contact: general → layout
OS: All → Windows XP
Also, as observed at:

and in my web application:

The issue also seems to not occur if the opacified element does not have a background, as observed in the fourth screenshot.
Basically Bug 302377 (that's the one on the radar to be fixed).
Closed: 13 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 302377
You need to log in before you can comment on or make changes to this bug.