195883 - Remove %-based opacity values

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[Markus Hübner]

The second testcase at
http://www.world-direct.com/mozilla-opacity-crash-testcase/
illustrates the performance problem when fading an element Mozilla flickers 
and is extremely slow.
Using trunk build 2003022709 on winxp pro sp1, 1.1ghz, 512ram

Comment 1

[Ian Nartowicz]

Win98, build 2003022814, I see the performance problem, but wouldn't describe it
as flickering.  The fading occurs in noticeable steps, but I think this is correct.

Comment 2

[Markus Hübner]

Well, the performance is so bad that "flickering" would be too fast to say :)
But seriously, don't know why Mozilla is that slow when fading through the 
individual steps of opacity.
Maybe a profile would help here.

Comment 3

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Mine

Comment 4

[Boris Zbarsky [:bzbarsky]]

The testcase uses percentage opacity instead of number opacity.  As I've
repeatedly stated, percentage opacity is slower (due to it reframing every
single time, unlike number opacity, which only reframes when changing to/from
1).  I've also repeatedly stated that there are no plans to fix that, since
percentage opacity should be removed rather than improved.

So I'm very tempted to just mark this bug "stop wasting people's time, dammit".

Not doing that for now in the feeble hope that Matic will fix the testcase to
properly set opacity and there will still be a problem to fix.

Comment 5

[Manfred Schneiderbauer]

I changed the code to use number opacity. The testcase has been updated.
This seems to work fine, although it sometimes still shows a short flicker.
Nonetheless it will crash in 1.3 builds.

I would recommend to remove the percentage capability if it works so bad and 
can't be fixed as its presence draws people to just use it; one would normally 
await it to work correctly just like the other method.

Comment 6

[Manfred Schneiderbauer]

Correction: the fader will not crash!

Comment 7

[Zibi Braniecki [:zbraniecki][:gandalf]]

Sorry, i'm agreeing with Boris here. Lets stop duplicating bugs where we all
know that someone works on it. You want this bug tio be fixed? Then help Robert
with bug 193849. It's about opacity performance.

To Comment #5. Percent opacity is not bugged right now (it was bugged long time
ago - bug 144832 ), it's only slower. I'd leave this as it is.

Suggesting DUPLICATE of bug 193849.

Comment 8

[Markus Hübner]

I can go with that decission - marking dupe.



*** This bug has been marked as a duplicate of 193849 ***

Comment 9

[Robert O'Callahan (:roc) (email my personal email if necessary)]

I think we should remove percentage opacity. It's just hurting us, it's not
according to spec, and the sooner we remove it, the better. I'm reopening this
bug to do just that.

http://www.w3.org/TR/2002/WD-css3-color-20020418/#transparency
Clearly a %-value is not valid according to CSS3.

Comment 10

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Attachment: disable %-values for '-moz-opacity'

Comment 11

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Attachment: testcase

Comment 12

[Boris Zbarsky [:bzbarsky]]

Comment on attachment 116270 [details] [diff] [review]
disable %-values for '-moz-opacity'

Thank you.

Comment 13

[Boris Zbarsky [:bzbarsky]]

Comment on attachment 116270 [details] [diff] [review]
disable %-values for '-moz-opacity'

Please wait for David to comment before checking in, though -- I seem to recall
him having a definite opinion on this issue, but not what the opinion was.....

Comment 14

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Sounds good to me.

Comment 15

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Fix checked in.

Comment 16

[Alex Peng]

I have the following codes to do splash screen and watermark. Everyone is
excited . I do use percentage to fade the screen. It's perfect for IE5.5+. I
notice the Mozilla/Netscape is sluggish--I don't realy mind, as long as it can
present. From code wise, I prefer to use % -- it's much easy, intuitive. IE has
a lot of visual effect, now Mozilla is catching up. You got to provide the
solution and easy to use, not W3 only. Web Designer like IE, because IE has the
solution. So, please keep % option.

By the way the watermark works for IE, but not Mozilla/Netscape.

<html>
<head>
	<title>Untitled</title>
</head>

<body>

<STYLE type="text/css">
body {margin:0px;background-color:transparent;}
#splashBg {	position: absolute;	background:black;	z-index:5;	width:100%;
height:100%;}
#splash {	position: absolute;	z-index:6;	width:100%;
height:100%;background-image:url(images/lib/shakespeare.jpg);background-position:center;background-repeat:no-repeat;}

</STYLE>

<DIV ID="splashBg"> </DIV>
<DIV ID="splash"> <A HREF=# onClick="watermark();"
style="color:white">Skip</A></DIV>


<SCRIPT language="JavaScript">
var opacityCount=100;
var fadeCount;
var splashBg = document.getElementById("splashBg");

function fadeOutScreen() {
	opacityCount=opacityCount-5;
	status=opacityCount;
	if (opacityCount>5) {
		if (document.all) {
	splashBg.style.filter="progid:DXImageTransform.Microsoft.BasicImage(opacity=."+opacityCount+")";
		} else if (document.getElementById) {
			splashBg.style.MozOpacity = opacityCount + "%";
		}
		fadeCount = setTimeout('fadeOutScreen()',25);
	} else {
		watermark();
	}
}
function watermark() {
	clearTimeout(fadeCount);
	splashBg.style.zIndex="-2";
	splashBg.style.visibility="hidden";
	var splash = document.getElementById("splash");
	splash.style.zIndex="-1";
	if (document.all) {
		splash.style.filter="progid:DXImageTransform.Microsoft.BasicImage(opacity=.08)";
	} else if (document.getElementById) {
		splash.style.MozOpacity = "8%";
	}

}
splashBg.style.visibility="visible";
fadeCount = setTimeout('fadeOutScreen()',25);
</SCRIPT>


</body>
</html>

Comment 17

[Boris Zbarsky [:bzbarsky]]

> From code wise, I prefer to use % -- it's much easy, intuitive.

Really?  You DO realize that "0.5" and "50%" typically mean DIFFERENT things in
CSS properties that support both formats?  And in particular that they meant
different things for -moz-opacity?

There was nothing easy or intuitive about percentage opacity.  It's removed.  It
will NOT be reinstated.  Trivial changes to your JS (replacing |+ "%"| with |/
100|) will make it work.