CSS3 box-shadow Einsatz schmerzliche Leistungskiller

Question

Nach sehr Stunden meine app Debuggen, wenn ich zum ersten Tests beginnen, eine Desktop-ausführbare Datei mit Awesomium (für Visual Studio 2010) habe ich viel sehen entfalten von Renderprobleme in WebKit, langsam neu gezeichnet und sehr seit langsames IO beim Tippen. Zuerst denke ich, dass es daran liegt, dass die gepufferte Prozess-API unbrauchbar ist oder irgendein Problem bei der Pufferung von Prozess-IO hatte.

Danach beginne ich ein neues Projekt mit QT5 über mit Qt-WebKit (Wieder mit Visual Studio 2010 SDK) und ich hatte eine schlechteste Leistung.

Auch nach all dies, begann ich ein anderes Projekt von Grund auf mit Tide (Webkit/Linux) - und ich war das Hinzufügen Datei für Datei und die App Verhalten zu analysieren.

Dann sah ich die Anwendung kann mit niedriger CPU-Auslastung und mit 60 FPS auf index.htm ausgeführt werden.

So, nachdem ich alle JavaScript-Dateien aus der ursprünglichen Anwendung in diesem neuen Projekt gesteckt hat er nicht die Framerate ändern. Aber wenn ich das CSS mit der Klasse darunter einsetze, hat die Anwendung gerade begonnen, 100% der CPU zu verbrauchen und die Bildrate ist auf ~ 10 FPS gefallen.

.overlay { 
    padding:30px 15px; 
    background:#fff; 
    background-color: #CCCCCC; 
    background-image: -moz-linear-gradient(#F5F5F5, #CCCCCC); 
    -webkit-box-shadow:0 5px 10px -10px rgba(0,0,0,0.50),0 1px 4px rgba(0,0,0,0.30),0 0 40px rgba(0,0,0,0.10) inset; 
    -moz-box-shadow:0 5px 10px -10px rgba(0,0,0,0.50),0 1px 4px rgba(0,0,0,0.30),0 0 40px rgba(0,0,0,0.10) inset; 
    box-shadow:0 5px 10px -10px rgba(0,0,0,0.50),0 1px 4px rgba(0,0,0,0.30),0 0 40px rgba(0,0,0,0.10) inset; 
} 

Beispiel:http://jsfiddle.net/7BWAW/1/

Wie kann ich diese Klasse neu zu schreiben, genauer gesagt, wie kann ich diese Klasse neu zu schreiben, ohne box-shadow Einsatz?

habe ich versucht, ohne ohne Glück ein transparentes PNG als Hintergrund verwenden, aber nicht weit von den Konturen ähnlich sind.

Da das Projekt viele Vorkommen der Box-Schatten-Einfügung in CSS hat, wenn jemand mir ein Licht geben kann, muss ich das Layout, das bereits genehmigt ist, verbessern - Entfernen der Box-Schatten-Einfügung.

Answer 1

Schließlich fand ich eine andere Technik border-image

.overlay { 
    border:30px solid transparent; 
    -webkit-border-image:url(http://s22.postimg.org/5blh30bkd/overlay_border.png) 30 30 stretch; /* Safari 5 and older */ 
    -o-border-image:url(http://s22.postimg.org/5blh30bkd/overlay_border.png) 30 30 stretch; /* Opera */ 
    border-image:url(http://s22.postimg.org/5blh30bkd/overlay_border.png) 30 30 stretch; 
} 

Siehe Fiddle Lösung:http://jsfiddle.net/7BWAW/3/

Aber limtations haben - ich kann nicht border-radius verwenden, und ich brauche zu verwenden ein weiterer DIV im Container Klasse .overlay, löst aber den größten Teil meines Problems.

Answer 2

ich vor diesem Problem konfrontiert, ist die Lösung mit Schatten, zu stoppen und für die Herstellung von Schatten um den Kasten kleine niedrige Größe Bild verwenden.

Answer 3

Sie somthing wie diese mit CSS und div schreiben:

<table> 
    <tr> 
     <td style="width:5px;heigth:5px"><img src="top-left-corner.png"></img></td> 
     <td></td> 
     <td style="width:5px;heigth:5px"><img src="top-right-corner.png"></img></td> 
    </tr> 
    <tr> 
     <td style="background-image:url('body-left.png');background-repeat:repeat-y;"></td> 
     <td> 
      Contet of the box 
     </td> 
     <td style="background-image:url('body-left.png');background-repeat:repeat-y;"></td> 
    </tr> 
    <tr> 
     <td style="width:5px;heigth:5px"><img src="bottom-left-corner.png"></img></td> 
     <td></td> 
     <td style="width:5px;heigth:5px"><img src="bottom-right-corner.png"></img></td> 
    </tr> 
</table>