box-shadows leads to slooow rendering(?)... #184

Open
domi-papin opened this Issue Nov 25, 2011 · 2 comments

Comments

Projects
None yet
2 participants

Here is a testcase derived from my current project ....

  1. Try in IE7-9 with latest PIE => hover effects on buttons are slow
  2. Disable all box-shadows and retry => hover effects are now visibly faster on IE7-8 and perfectly fast in IE9

Maybe PIE rendering of box-shadows can be optimized (I hope so) OR this is inherent to IE poor engines... If the latter, that would mean box-shadow is merely usable for IE.

<!DOCTYPE html>
<html class="ie8 oldie" xmlns:fb="http://www.facebook.com/2008/fbml" dir="ltr" lang="fr_FR"> 
<head>
<meta charset="utf-8">
<title>Testcase for css3pie buttons issue </title>
<!--<link type="text/css" href="/themes/default/Css/common.styl.css" rel="stylesheet" >-->
<style>
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: helvetica;
  display: block;
  color: #3b3b3b;
  background: linear-gradient(top, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.00) 100%);
  -pie-background: linear-gradient(top, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.00) 100%);
  behavior: url("/PIE/PIE.htc");
}
#bodywrapper {
  position: relative;
  z-index: 1;
  width: 932px;
  margin: auto;
}
#contentWrapper1,
#contentWrapper2 {
  z-index: 2;
  display: block;
}
#contentWrapper1 {
  -webkit-border-radius: 0 0 15px 15px;
  -moz-border-radius: 0 0 15px 15px;
  border-radius: 0 0 15px 15px;
  -webkit-box-shadow: 2px 2px 2px #808080;
  -moz-box-shadow: 2px 2px 2px #808080;
  box-shadow: 2px 2px 2px #808080;
  behavior: url("/PIE/PIE.htc");
  background-color: #ccc;
  padding-bottom: 4px;
  width: 934px;
  border-right: 1px solid #808080;
}
#contentWrapper2 {
  -webkit-border-radius: 0 0 15px 15px;
  -moz-border-radius: 0 0 15px 15px;
  border-radius: 0 0 15px 15px;
  border-left: 1px solid #e0e0e0;
  -webkit-box-shadow: 1px 1px 1px #808080;
  -moz-box-shadow: 1px 1px 1px #808080;
  box-shadow: 1px 1px 1px #808080;
  behavior: url("/PIE/PIE.htc");
  background-color: #e5e5e5;
  width: 930px;
  padding-bottom: 4px;
}
#content {
  margin-top: 55px;
  background-color: #fff;
  width: 926px;
  z-index: 2;
  -webkit-border-radius: 0 0 15px 15px;
  -moz-border-radius: 0 0 15px 15px;
  border-radius: 0 0 15px 15px;
  behavior: url("/PIE/PIE.htc");
}
#contentInside {
  padding: 40px 20px 40px 40px;
  -webkit-border-radius: 0 0 15px 15px;
  -moz-border-radius: 0 0 15px 15px;
  border-radius: 0 0 15px 15px;
}
.blueButton,
button.blueButton,
a.blueButton,
.jforms-submit {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 1px #808080;
  -moz-box-shadow: 1px 1px 1px #808080;
  box-shadow: 1px 1px 1px #808080;
  behavior: url("/PIE/PIE.htc");
  padding: 7px 20px;
  text-decoration: none;
  color: #fff;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #29748c), color-stop(0.02, #8cb6cf), color-stop(0.06, #8cb6cf), color-stop(0.07, #379bbb), color-stop(1, #29748c));
  background: -webkit-linear-gradient(top, #29748c 0%, #8cb6cf 2%, #8cb6cf 6%, #379bbb 7%, #29748c 100%);
  background: -moz-linear-gradient(top, #29748c 0%, #8cb6cf 2%, #8cb6cf 6%, #379bbb 7%, #29748c 100%);
  background: linear-gradient(top, #29748c 0%, #8cb6cf 2%, #8cb6cf 6%, #379bbb 7%, #29748c 100%);
  -pie-background: linear-gradient(top, #29748c 0%, #8cb6cf 2%, #8cb6cf 6%, #379bbb 7%, #29748c 100%);
}
.blueButton:hover,
button.blueButton:hover,
a.blueButton:hover,
.jforms-submit:hover,
.buttonContainer:hover .blueButton,
.buttonContainer:hover button.blueButton,
.buttonContainer:hover a.blueButton,
.buttonContainer:hover .jforms-submit {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #29748c), color-stop(0.02, #5794ae), color-stop(0.06, #5794ae), color-stop(0.07, #26738f), color-stop(1, #194c5f));
  background: -webkit-linear-gradient(top, #29748c 0%, #5794ae 2%, #5794ae 6%, #26738f 7%, #194c5f 100%);
  background: -moz-linear-gradient(top, #29748c 0%, #5794ae 2%, #5794ae 6%, #26738f 7%, #194c5f 100%);
  background: linear-gradient(top, #29748c 0%, #5794ae 2%, #5794ae 6%, #26738f 7%, #194c5f 100%);
  -pie-background: linear-gradient(top, #29748c 0%, #5794ae 2%, #5794ae 6%, #26738f 7%, #194c5f 100%);
}
.blueButton:active,
button.blueButton:active,
a.blueButton:active,
.jforms-submit:active {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #16313a), color-stop(0.02, #184352), color-stop(0.06, #194c5f), color-stop(1, #26738f));
  background: -webkit-linear-gradient(top, #16313a 0%, #184352 2%, #194c5f 6%, #26738f 100%);
  background: -moz-linear-gradient(top, #16313a 0%, #184352 2%, #194c5f 6%, #26738f 100%);
  background: linear-gradient(top, #16313a 0%, #184352 2%, #194c5f 6%, #26738f 100%);
  -pie-background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #16313a), color-stop(0.02, #184352), color-stop(0.06, #194c5f), color-stop(1, #26738f));
  -pie-background: -webkit-linear-gradient(top, #16313a 0%, #184352 2%, #194c5f 6%, #26738f 100%);
  -pie-background: -moz-linear-gradient(top, #16313a 0%, #184352 2%, #194c5f 6%, #26738f 100%);
  -pie-background: linear-gradient(top, #16313a 0%, #184352 2%, #194c5f 6%, #26738f 100%);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-box-shadow: none;
}
</style>
</head><body >

<div id="bodywrapper" class="clearfix">
        <div id="contentWrapper1">
            <div id="contentWrapper2">
                <div id="content">
                    <div id="contentInside">

                        <a class="blueButton" href="#" title="toutes les formules d'abonnement"><span class="arrowBullet">Formules d'abonnement</span></a><br/><br/>
                        <a class="blueButton" href="#" title="toutes les formules d'abonnement"><span class="arrowBullet">Formules d'abonnement</span></a><br/><br/>
                        <a class="blueButton" href="#" title="toutes les formules d'abonnement"><span class="arrowBullet">Formules d'abonnement</span></a><br/><br/>
                        <a class="blueButton" href="#" title="toutes les formules d'abonnement"><span class="arrowBullet">Formules d'abonnement</span></a><br/><br/>
                        <a class="blueButton" href="#" title="toutes les formules d'abonnement"><span class="arrowBullet">Formules d'abonnement</span></a><br/><br/>
                        <a class="blueButton" href="#" title="toutes les formules d'abonnement"><span class="arrowBullet">Formules d'abonnement</span></a><br/><br/>
                        <a class="blueButton" href="#" title="toutes les formules d'abonnement"><span class="arrowBullet">Formules d'abonnement</span></a><br/><br/>
                        <a class="blueButton" href="#" title="toutes les formules d'abonnement"><span class="arrowBullet">Formules d'abonnement</span></a><br/><br/>
                        <a class="blueButton" href="#" title="toutes les formules d'abonnement"><span class="arrowBullet">Formules d'abonnement</span></a><br/><br/>
                        <a class="blueButton" href="#" title="toutes les formules d'abonnement"><span class="arrowBullet">Formules d'abonnement</span></a><br/><br/>
                        <a class="blueButton" href="#" title="toutes les formules d'abonnement"><span class="arrowBullet">Formules d'abonnement</span></a><br/><br/>
                        <a class="blueButton" href="#" title="toutes les formules d'abonnement"><span class="arrowBullet">Formules d'abonnement</span></a><br/><br/>

                    </div>
                </div>
            </div>
        </div>
</div>

</body></html>

Hope someone will be able to investigate this issue.
OTH,

regards,
Dominique
twitter : @signap

OK.

I've to clarify a bit. My tests were conducted :

  • for IE9, under a VM on a 2 years old mac.
  • for IE8, on a true IE8 with windows XP sp3 BUT ON AN OLD PC (6/7 years old, AMD sempron 1.6Ghz and 1Go of RAM)

I've asked someone to test IE9 on a recent PC with windows 7 and lots of RAM. AND THE LATENCY DOES NOT SHOW.
If she turns her IE9 into IE8 rendering mode, she starts to see some latency but its acceptable.

SO the rendering of box-shadow seems to be CPU-intensive (not surprising) with CSS3PIE. But it is still usable on recent machines.

OTH,

Owner

lojjic commented Nov 28, 2011

I definitely see the lag in your testcase. I'll try to profile and see if there's anything that can be done about it, but it may just boil down to IE's VML rendering speed.

FYI, PIE does not render box-shadow in IE9, it is rendered natively there. So any results in IE9 are probably not relevant.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment