100 bytes, image/png
2.51 KB, text/html
2.82 KB, text/html
147 bytes, image/png
3.04 KB, text/html
827 bytes, image/png
3.27 KB, text/html
8.22 KB, patch
|Details | Diff | Splinter Review|
148 bytes, image/png
Reduced testcase of the CSS page: this shows that the perf problem is the use of a tiny semi-opaque PNG for transparency.
5.21 KB, text/html
9.39 KB, patch
|Details | Diff | Splinter Review|
The W3C has recently updated their CSS page to use even fancier styles, etc. The transparent background used on the fixed positioned banner element completely nails Mozilla's performance on rendering and scrolling, making it pretty much unusable. To make matters worse, even though IE6 STILL can't render this page correctly (it couldn't render the old version right either), its performance is so much better that it's a "more pleasant browsing experience" overall. I'd consider this a very high-visibility bug, if not a very critical one.
wow, that's bad.
Assignee: jst → kmcclusk
Severity: normal → major
Status: UNCONFIRMED → NEW
Component: DOM Style → Compositor
Ever confirmed: true
QA Contact: ian → petersen
this page is also refering to bug 96088
Hmm, this really does suck, any chance of getting some traction on this on the m094 branch?
marking "OS: All" based on DBaron's comment in bug 96088 propose for mozilla0.9.5
OS: Windows 98 → All
there seem to be some problems with the way mozilla handles transparent PNGs. I'll post 2 testcases.
err the testcase above was meant to say 2 color not 2 bit. I've also noticed that when the image (32bit) is made bigger and is not repeated it is also faster than original testcase but still have more visible "lag" effect than the 2 color image. The thing is that when the bigger image is reduced to a 2 color image it does not affect the "lag". I'll post another testcase.
Changing platform to all after testing on Mac with build id: 2001091804
Hardware: PC → All
is bug 100575 connected to or a dupe of this one?
The page scroll time of the original page is on Windows dominated by: nsViewManager::RenderViews nsViewManager::RenderDisplayListElement nsView::Paint PresShell::Paint nsBlockFrame::Paint nsCSSRendering::PaintBackground nsRenderingContextImpl::DrawTile nsImageWin::DrawTile nsImageWin::Draw nsImageWin::DrawComposited nsImageWin::DrawComposited is ~80% of the scroll time. It and nsImageWin::Draw is called 170000 times for 4-5 page downs. nsImageWin::DrawTile is called only 227 times.
cc'ing pavlov & sfraser. Read bratelle's analysis, above.
If we can't fix this on the NS branch, I'd suggest that the branch kludgily disable transparency in fixed-positioned elements, period. This bug is so painful I don't think emojo should allow it to see the light of day. I think the W3C page is normally a good place to show off our CSS2 support, but this cancels out all the good things and leaves the user feeling like Moz is buggy.
I saw on Linux something very similar to what Daniel Bratell saw on on Windows, except s/Win/GTK/ in the profile. (Also note that there's some recursion between nsBlockFrame::Paint and nsContainerFrame::Paint in there too.)
A somewhat embarrassingly public discussion of this bug: http://dot.kde.org/1001290684/
Dave, can you give your assessment of how bad this bug is? The behavior seems bad but was wondering a) how many sites will exhibit this problem and b) how badly this will hurt our standards compliance story. We're only accepting "stop ship" bugs for the nsbranch now so let us know if we should consider this one.
Is this specifically a problem with fixed-position, transparent, 32bit PNGs? If so, I don't think this is "stop ship", based on the low number of cases where this is likely to crop up. If there is a simple way to "turn off" the transparency, we should investigate it as an option for the branch.
This bug is specific to having a page that includes a fixed position png image with transparency. This causes scrolling performance to degrade because the entire image must be composited with the background pixel by pixel every time the user scrolls. There isn't an easy solution for this. If we turn off transparency for PNG files then a much larger number of sites will be impacted. One of the big advantages of using a PNG image is it's support for transparency. To speed up the compositing operation we need to investigate platform specific rendering api's which may contain acceleration for compositing operations such as DirectX on WIN32. I'm not sure if there analogous capabilities on Mac and Linux. As a short term solution, we may be able to turn off transparency on any page which has a fixed-position element.
There is no problem in nsImageWin::DrawTile then? The almost one thousand nsImageWin::Draw calls for each call to nsImageWin::DrawTile seems a little high to me. This shouldn't be such a tough problem that we require special hardware accelerated graphics I think. Not on modern computers with CPU:s in the GHz class, and still it does.
I did some testing on 2001091311/Mac (where the scroll problem seemed much worse than NS6.1/Win, for example) and discovered the following: - upon making the background of the "banner" (the fixed-position menu) a 2x2 GIF instead of a 2x2PNG, the scroll speed sped up a bit. - altering the background image to be 8x8 or 16x16 really sped up scrolling, although it left "ghosts" of the banner littered through the page as I scrolled up and down. See http://www.meyerweb.com/eric/css/tests/moz/w3css/style-css8.html for the 8x8 GIF version, and http://www.meyerweb.com/eric/css/tests/moz/w3css/style-css2.html for the 2x2 GIF version. In Win2KPro I can't see a difference in scroll speed, but on a Mac I definitely can.
"This bug is specific to having a page that includes a fixed position png image with transparency. This causes scrolling performance to degrade because the entire image must be composited with the background pixel by pixel every time the user scrolls." If someone could send me an 8x8 or 16x16 version of the PNG, I can add it to my test cases (mentioned above) and see if that speeds things up or not. I'd create my own, but apparently Photoshop 5.5 doesn't want to play nice with PNG. Anyway, I've seen cases where tiling a 1x1 GIF (not PNG, but GIF) in the background of a non-fixed element really grinds MacMoz to a halt, so perhaps the two are related.
Tiling optimizations have gone in on the Mac since the 2001091311 build, and I think these optimizations would eliminate any perceived speed difference between the 2x2 and 16x16 background images.
Note: Neither I.E 6 or Opera 5 Renders this page correctly. I.E completely ignores the fact that the translucent menu is fixed position and scrolls it up and down. Opera honors the fixed positioning of the translucent menu, but does NOT render it by combining the background image with the menu. It seems to render the menu as either having an opaque background or treats the background as transparent. Mozilla renders the page correctly, but is very slow to scroll.
Status: NEW → ASSIGNED
Yow! Both of those GIF versions are so much faster it's terrifying. Is the problem endemic to PNGs? Is it because of their 'real' alpha support? In that case are we having to do get/blend/put X-server round-trips for every tile repetition?
i am not sure if this is png specific. Please look at the following page: http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html The author (eric?) says there are no PNGs involved and it still scrolls very slow with a fixed background.
"Tiling optimizations have gone in on the Mac since the 2001091311 build, and I think these optimizations would eliminate any perceived speed difference between the 2x2 and 16x16 background images." Not for me, at least in 2001092303. The ghosting is gone, but the scroll speeds seem about the same to me. They might be a little faster than 2001091311, of course, but I'm going by what my eye sees. The 2x2 PNG is still dog-slow, the 2x2 GIF is slowish but not bad, and the 8x8 GIF is pretty fast. "i am not sure if this is png specific. Please look at the following page: http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html The author (eric?) says there are no PNGs involved and it still scrolls very slow with a fixed background." In which version on what platform? The speed seems pretty good to me in 2001092303/Mac and also NS6.1/Win2KPro. In terms of images, each stylesheet uses exactly four JPGs and nothing else, and also no opacity property calls. Anyway, PNGs are obviously a lot slower for me (on Mac) and while smaller images tile more slowly, the biggest speed hit does seem to happen with PNG files.
eric: i am using 2001092409 on linux. P3-500, 256MB, TnT2-M64.
"Please look at the following page: http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html The author (eric?) says there are no PNGs involved and it still scrolls very slow with a fixed background." Here it scrolls smoothly on a 16 bit desktop (Windows 2000), but lags a bit in 32 bit. IMHO this isn't necessarily related to mozilla itself, this page really puts some load on the graphics card in high resolutions/bit depths...
The small "8-bit" alpha image was killing performance under gtk because we round trip the server for each tile. The attached patch for nsImageGTK checks if an 8-bit alpha channel image is really just a masked image and goes through the fast path if possible. Makes a night/day difference for the w3 css page. I'm working on proper tiling support for true alpha images, but this is probably a worthwhile change since avoiding the compositing path will be faster.
I've looked at this code in detail before in relation to another bug, and this looks like a very well-done solution to the most common case of the problem. My only quibble (which is a quibble to the original code, not the patch) is that there's an assumption inherent in the Alpha code (and quite possibly in other code as well) that a row is no more than 32K bytes long - and for 8-bit alpha, that means 32K pixels wide (and no more than 32K pixels high): PRInt16 mAlphaRowBytes; // alpha bytes per row + PRInt16 mTrueAlphaRowBytes; // alpha bytes per row PRInt16 mAlphaWidth; // alpha layer width PRInt16 mAlphaHeight; // alpha layer height Other than that (which is really a separate issue anyways, and probably shouldn't be addressed in this bug) email@example.com for what it's worth. I imagine pav or some such should review as well, since I'm not a gfx/gdk guru, so I'm not marking it as reviewed on the attachment.
Pav, can you review tor's patch?
Comment on attachment 50800 [details] [diff] [review] same plus add back optimization for fully-opaque 8-bit alpha PNG sr=attinasi. But, what is this cast to (PRUint8*) for? delete (PRUint8*)mTrueAlphaBits; Seemse unnecessary...
Attachment #50800 - Flags: superreview+
That cast is required to avoid violating C++ specs. The HPUX compiler will complain/break if it's removed. (Found that out the hard way a ways back - HPUX gives very good error messages.)
My apologies if I'm wrong - I assumed it was being casted because it was a void *. delete  (void *) is what gives HPUX fits. Perhaps the code was stolen from such a case.
Checked in with attinasi's comment addressed (casted delete copied from other unnecessarily casted deletions in nsImageGTK [now fixed]). Leaving bug open for macos/win32 performance problems.
(verified fixed on linux)
The 32bit testcase is muchly imporved here. It's still not keeping up with my keyrepeat events and so when I lift my finger from the up-arrow key it still keeps on scrolling up. it should stop scrolling as soon as I lift my finger off the button. but that's another bug entirely... :) Build: 2001092813; OS: Linux 2.2.19; Glibc: 2.1.3; Distro: Debian 2.2r3; System: 700Mhz, Pentium III, 256MB RAM.
Summary: New W3C CSS page hurts Mozilla → [win32,mac]New W3C CSS page hurts Mozilla
Daniel, 32 bit depths are 24bits color + 8 bits of alpha channels.. which is what we are seeing here.. 16bit will probably not run the code for the 8bits of alpha channels of an 32bit image. Hence feeling of faster in transparency, Opacity, Alpha.. etc, when its not being used in 16bit.
*** Bug 108182 has been marked as a duplicate of this bug. ***
*** Bug 110051 has been marked as a duplicate of this bug. ***
*** Bug 111482 has been marked as a duplicate of this bug. ***
*** Bug 111687 has been marked as a duplicate of this bug. ***
*** Bug 106294 has been marked as a duplicate of this bug. ***
Reassigning to Don. The performance problem is caused by tiling a 1X1 png with opacity.
Assignee: kmcclusk → dcone
Status: ASSIGNED → NEW
Compare the performance with this testcase as-is, and with the comment-out style rule for opacity instead of the background PNG
Something that is interesting about the w3c page is that when it first lays out, and I scroll (on Mac), the floating transparent badge leaves turds. If I resize the window slightly, the floater moves a little to the left (by the width of the scroll bar?), and thenceforth scrolling is clean. So it looks like the initial layout of the floater is incorrect, possibly because of scrollbars showing up.
Scrolling speed is OK on Linux 2001122008 (K6-2 500, 512MB, Matrox G200 8MB).
Still very slow on Windows 98, Mozilla 0.9.7, 380Mhz K6-2.
I'm not sure if this is already the case, but couldn't this be sped up in windows by using DirectX (DirectDraw to be more precise)? Those are the functions IE uses and IE is fine with this page...
Jesse: IE doesn't do the transparency on the floating toolbar, and it's the use of PNG alpha-transparency causing the performance hit in Moz. See comment #23, comment #28, above.
ahhh never mind then... But maybe DirectX or Quicktime (Win32 and Mac respectively) could be used to speed up this process.
It is possible that DirectX/Draw might help here, or at least make better use of available HW support/acceleration. However, that's not a trivial change, and there might be some ramifications. In general, though, DirectDraw/etc are pretty well optimized and very usable.
I think it could speed up quite some stuff in Mozilla... But indeed it would be a large change with it's implications etc. It may just be worth it.
I think such big changes shouldn't be checked in before the "magical" 1.0 release. They would either "make 1.0 suck" or make 1.0 be released a lot later, I guess. Sure, it would be nice to have this stuff fixed in an optimum way, but do we rather want a (too?) late 1.0, a too buggy 1.0 or a rock-solid 1.0 with a small list of lacking features and performance issues?
Should we then open a bug with Direct X optimizations for Mozilla and mark it future, that way it can be tracked and other places that could use such optimizations could also.
Please test and let me know if this is good enough with Marc's tests.
Comment on attachment 63588 [details] [diff] [review] More error checking and scaling fix in this patch. sr=attinasi
Attachment #63588 - Flags: superreview+
Comment on attachment 64016 [details] [diff] [review] added just a few speedups.. optimized some math. firstname.lastname@example.org
Attachment #64016 - Flags: review+
This page is rendered way faster now.. and scrolls real fast, w2k.
Windows fix checked in.
It works good now. (Win) Except that the background near the rounded corners just above the headline 'learning css' get trashed. Maybe this is a bug in -moz-border-radius ?
looks like other platforms have tried in bug 64188
Peter, background near the rounded corners mess is bug 101130. (20020111003 win scrolls fine, sweet.)
Yup, win32 is much improved in 2002011103. Is the patch win32 only, or do we need to find someone to test on mac? And is this a problem on any of the more obscure OS's?
That patch is windows only. Mac already performs OK on this page.
Mac and Linux are fine.. according to comments.. so I am closing out this bug.
Status: NEW → RESOLVED
Last Resolved: 17 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.