Closed Bug 302380 Opened 19 years ago Closed 15 years ago

Scrolling an IFRAME inside a DIV with overflow: hidden results in ugly repainting

Categories

(Core :: Web Painting, defect)

Product:
Core
Component:
Web Painting
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED FIXED

People

(Reporter: fuzzy, Assigned: roc)

References

Details

(Keywords: testcase, Whiteboard: [widget-removal])

Attachments

(2 files)

testcase from comment 0
669 bytes, text/html
Details
workaround
779 bytes, text/html
Details 
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

I have an IFrame inside a DIV, with it's overflow set to 'hidden'.  The DIV has
mouse events that are designed to allow the content of the IFrame to be panned.
 In Firefox, when I set the scrollLeft or scrollTop, the images get all screwed
up as if the page is not repainting properly.  If I click on any input or resize
the window manually though, it repaints it self fine.  Also, if I set the
overflow of the DIV to "scroll" everything works as expected too.

Reproducible: Always

Steps to Reproduce:
<html>
<script>
function simulateScroll(x) {
  var top = document.getElementById('theDiv').scrollTop;
  document.getElementById('theDiv').scrollTop = top + x;
}
</script>
<body>
  <input type="button" value="moveUp" onclick="simulateScroll(30)">
  <input type="button" value="moveDown" onclick="simulateScroll(-30)">
  <div id="theDiv" style="position:absolute; left:100px; top:100px;
height:500px; width:500px; overflow:hidden; border-style:solid; border-width:3px">
    <iframe src="http://www.google.com/" style="position:absolute; left:0px;
top:0px; width:1000px; height:1000px;"  scrolling="no"></iframe>
  <div>
</body>
</html>


Expected Results:  
It should repaint/redraw the page properly
Keywords: testcase
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8b4) Gecko/20050726 Firefox/1.0+
ID:2005072616

This works for me if I'm understanding the issue right. Reporter, could you test
this in a more recent build?
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/
Redrawing messes up in the branch
But with Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8b4)
Gecko/20050727 Firefox/1.0+ ID:2005072710 things are much better.
Reporter, please try with Deer Park Alpha 2 (Firefox 1.5 alpha 2) and report
back as to what you see. Thanks!
Using a nightly build of Firefox, the page appears to fully redraw properly on
both Linux and Windows (albeit with a lot of ugly flashing).  Using Firefox
1.0.4, I experience the problem described in the thread.
This will be fixed when 1.5 is released.
Status: UNCONFIRMED → RESOLVED
Closed: 19 years ago
Resolution: --- → WORKSFORME
thx
No, this bug is not fixed.  The result is a lot of ugly flashing (see comment #4).

REOPENING and assigning to the proper component.
Status: RESOLVED → UNCONFIRMED
Component: General → Layout: View Rendering
OS: Windows XP → All
Product: Firefox → Core
Hardware: PC → All
Resolution: WORKSFORME → ---
Version: unspecified → Trunk
confirming and reassigning to defaults.
Assignee: nobody → roc
Status: UNCONFIRMED → NEW
Ever confirmed: true
QA Contact: general → ian
Summary: I have an IFrame inside a DIV, with it's overflow set to 'hidden'. When I manually scroll, in Firefox, the images get all screwed up and the page does not repaint properly. → Scrolling an IFRAME inside a DIV with overflow: hidden results in ugly repainting
This won't be fixed in 1.8. It will be fixed by planned 1.9 work.

I will attach a testcase that illustrates a possible workaround.
Attached file workaround — 
Wrap an "overflow:auto" DIV around the overflow:hidden DIV and make it the
right size. (Continue to scroll the hidden DIV.) Then the flickering is not
visible. This might even fix things in FF 1.0.

I know workarounds suck but fixing this right is too much work for 1.8.
Whiteboard: [widget-removal]
Depends on: 316489
It would be great to fix this for FF2 since it has particularly nasty ramifications for some webapps. I know of at least one in development that is likely to cause a significant amount of buzz. Currently, it's a bit crippled in FF because of this bug.  I've nominiated it accordingly.
Flags: blocking1.9a1?
Flags: blocking1.9a1? → blocking1.8.1?
The workaround doesn't work?

Another workaround that might be applicable if there's no horizontal overflow is to set overflow-x:auto, overflow-y:hidden.
Not going to block 1.8.1 for this bug.
Flags: blocking1.8.1? → blocking1.8.1-
Flags: blocking1.9a2? → blocking1.9-
Whiteboard: [widget-removal] → [widget-removal][wanted-1.9]
No longer depends on: 316489
Could 1.9 be testen against this, and possibly blocked because of this? Or are we to late already?
Re-nominating as we've been getting feedback from webapp devs that this is a common issue for them.
Flags: blocking1.9- → blocking1.9?
Not fixable for 1.9; really needs compositor.
Flags: blocking1.9? → blocking1.9-
Firefox 2.0.0.6 on Windows AND Mac
On the Mac this Bug doesn't excist. But on Windows it is.
Experiencing very similar issues (IFRAME with horizontal panning inside div)
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

works/draws fine in IE6 and Opera 9.24 PC

attempted to turn scrolling=no and that didn't resolve it (when a DIV has overflow=auto (on)) it does the same flickering -- but you can set the overflow to hidden and the flickering will disappear and behave "as expected") this obviously can't be set for an IFRAME.
I confirm this bug on FF/Linux (both 2.0.x and 3.0b2).

(In reply to comment #10)
> Created an attachment (id=191422) [details]
> workaround
> 
> Wrap an "overflow:auto" DIV around the overflow:hidden DIV and make it the
> right size. (Continue to scroll the hidden DIV.) Then the flickering is not
> visible. This might even fix things in FF 1.0.

This works great.

> I know workarounds suck but fixing this right is too much work for 1.8.

Yep, sucks. ;-)
Flags: wanted1.9+
Whiteboard: [widget-removal][wanted-1.9] → [widget-removal]
Here is a website where the bug can be found.
http://www.reggs.com/en/page/search/
Robert O'Callahan...

Big huge enormous thanks! :D I had a similar problem to the one described above. I got an iframe inside of a div with overflow set to hidden but, when I moved that iframe down via JavaScript (in order to hide it progressively), parts of the screen started to flick very badly on Gecko :S .

I could solve this temporally making a "blank" iframe at the bottom with an higher z-index than the another iframe (a poor solution, I know). It worked fine... But the problem was that, when I modified the visibility or z-index of any of these elements, the flicker came back.

However, your solution has blown my problems of months in just a few minutes (What I've needed to find this bug ticket and read it, he he he).

Thank you very much.
Flags: wanted1.9-
Flags: wanted1.9+
Flags: wanted-next+
This was fixed by bug 352093.
Status: NEW → RESOLVED
Closed: 19 years ago → 15 years ago
Resolution: --- → FIXED
Component: Layout: View Rendering → Layout: Web Painting
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: