search

xxfxxf / chromiumembedded

Automatically exported from code.google.com/p/chromiumembedded
0 stars 0 forks source link

3D transforms not being applied. #395

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
What steps will reproduce the problem?
1. Use 3D Transforms to animate an element in 3D space while preserving the 
perspective. To achieve this a combination of transform attributes are used as 
shown in the CSS below.

What is the expected output? What do you see instead?

The expected result would be a 4 sided "box" rotating it's sides on the X axis. 
This works in Chrome (14.0.835.202), but does not in CEF client where it 
appears to only be rotating in 2D space.

What version of the product are you using? On what operating system?

r306

Please provide any additional information below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>3D Transform Test</title>
    <style type="text/css">

    @-webkit-keyframes MessageSpin {

      0% { 
        -webkit-transform: rotateX(0deg); 
      }

      100% { 
        -webkit-transform: rotateX(360deg); 
        }
      }

      h1,
      h2 {
       padding: 0;
       margin: 0;
        font: bold 20px/40px Verdana, sans-serif;
      }

      #Container {
        display: block;
        height: 40px;
        -webkit-perspective: 800;
      }

      #Tumbler {
        height: 40px;
        width: 280px;
        -webkit-perspective: 800px;
      }
      #Tumbler > ul {
        position: relative;
        width: 280px;
        height: 40px;
        padding: 0;
        margin: 0;
      }
        #Tumbler > ul.Spin {
        -webkit-transform-style: preserve-3d;
        -webkit-animation: MessageSpin 4s infinite ease-in-out;
        -webkit-animation-fill-mode: forwards;
      }
      #Tumbler > ul > li {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        padding: 0;
        margin: 0;
        text-indent: 10px;
        color: #FFFFFF;
        font-weight: bold;
        text-shadow: 0 1px rgba(0,0,0,0.5);
      }

      #Tumbler > ul > li:nth-child(1) {
        background: #990000;
        -webkit-transform: rotateX(0deg) translateZ(20px);
      }

      #Tumbler > ul > li:nth-child(2) {
        background: #990099;
        -webkit-transform: rotateX(-90deg) translateZ(20px);
      }

      #Tumbler > ul > li:nth-child(3) {
        background: #009900;
        -webkit-transform: rotateX(-180deg) translateZ(20px);
      }

      #Tumbler > ul > li:nth-child(4) {
        background: #999000;
        -webkit-transform: rotateX(-270deg) translateZ(20px);
      }
    </style>
</head>
<body>

    <h1>3D Transform Test</h1>

    <div id="Container">
      <div id="Tumbler">
        <ul class="Spin">
          <li><h2>Side 1</h2></li>
          <li><h2>Side 2</h2></li>
          <li><h2>Side 3</h2></li>
          <li><h2>Side 4</h2></li>
        </ul>
      </div>
    </div>    

</body>
</html>

Original issue reported on code.google.com by custa1...@gmail.com on 31 Oct 2011 at 3:20

GoogleCodeExporter commented 9 years ago 
In CEF you will only see "Side 3" flip over and over. The expected result you 
will see it roll through "Side 1"  to "Side 4" before back to "Side 1".

I have also now added a file to download and test.

Original comment by custa1...@gmail.com on 31 Oct 2011 at 3:40

Attachments:

GoogleCodeExporter commented 9 years ago 
This doesn't work in Chrome 16.0.912.15 dev - so i think there is a Chromium 
issue.

Original comment by fdd...@gmail.com on 31 Oct 2011 at 8:04

GoogleCodeExporter commented 9 years ago 
Just re-downloaded my file and it works perfectly under Safari 5.1.1 
(7534.51.22), Rockmelt 0.9.68.1415, Chrome 16.0.912.15 dev all on Mac OS 
tonight.

Original comment by custa1...@gmail.com on 31 Oct 2011 at 11:19

GoogleCodeExporter commented 9 years ago 
I'm running 3D-Transform-Test.htm on on Chrome 16.0.912.15 dev on Linux, and it 
is doesn't work (i'm always see flipping "Side 3"). Same with latest versions 
with CEF (on linux). Sorry, can't now check it on windows.

Original comment by fdd...@gmail.com on 31 Oct 2011 at 11:55

GoogleCodeExporter commented 9 years ago 
3D transforms should be being handled on the GPU. Is there a way to force GPU 
rendering using flags in the Linux version just to be sure?

Original comment by custa1...@gmail.com on 31 Oct 2011 at 12:26

GoogleCodeExporter commented 9 years ago 
google-chrome --enable-accelerated-compositing has no effect.
But this can be depends from hardware/sys settings/etc...
Try tweak cef settings and browser settings about different gl implementations 
and accelerations.

Original comment by fdd...@gmail.com on 31 Oct 2011 at 12:39

GoogleCodeExporter commented 9 years ago 
Currently accelerated compositing is disabled by default in CEF, 'cause it 
broken.
When i'm set CefBrowserSettings.AcceleratedCompositingEnabled = true then you 
example works fine, but page renders incorrectly.
You can play with CefSettings.GraphicsImplementation - may be something will 
got better result.
For example DesktopInProcess for me 'causes app crash, AngleInProcess - 
render's wrong (but you 3d transforms applied fine).
So may be have sense to update to latest CEF version, may be it will be works 
better.
As i know, there is completely a Chromium's issue.

Original comment by fdd...@gmail.com on 31 Oct 2011 at 1:53

GoogleCodeExporter commented 9 years ago 
Did you set CefBrowserSettings.accelerated_compositing_enabled to true?

Original comment by magreenb...@gmail.com on 31 Oct 2011 at 1:55

GoogleCodeExporter commented 9 years ago 
I trying this sample: 
http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html
For me CEF r348 crashes with any graphics implementation (when 
accelerated_composing enabled). There is only my build broken?

Original comment by fdd...@gmail.com on 31 Oct 2011 at 6:19

GoogleCodeExporter commented 9 years ago 
Can  cef use css 3d transforms? Can someone supply the main setting about it?

Original comment by force2...@gmail.com on 26 Dec 2011 at 2:40

GoogleCodeExporter commented 9 years ago 
Either, when i add command-line option "--accelerated_composing enabled" for 
cef1, the browser is frozen, and first frame of the animations seems to be 3D.

cef3 has solved this issue, whereas, i'm using cef1 for its OSR right now.

has there any plan to solve this problem in cef1?

Original comment by Feaba...@gmail.com on 16 Aug 2012 at 2:41

GoogleCodeExporter commented 9 years ago 
Accelerated content including 3D CSS will not be supported in CEF1. It should 
work as expected in CEF3.

Original comment by magreenb...@gmail.com on 16 Aug 2012 at 2:44

GoogleCodeExporter commented 9 years ago 
This issue was not caused by accelerated_composing.
Chromium has this problem if you add command-line "--gpu-in-process", so only 
cef3 use gpu process can fix this.

Original comment by xqhuang....@gmail.com on 5 Sep 2013 at 3:39