Does Chrome 12 Really Support CSS 3D Transforms? Including on Linux

Does Chrome 12 really support CSS 3D transforms? Including on Linux?

Go to the Chromium web SCM interface and check that your GPU isn't blacklisted.

Also, go to chrome://gpu/ and check that Chrome reports 3D CSS as enabled.

Does Chrome 12 really support CSS 3D transforms? Including on Linux?

Go to the Chromium web SCM interface and check that your GPU isn't blacklisted.

Also, go to chrome://gpu/ and check that Chrome reports 3D CSS as enabled.

Optimizing animation performance in WebKit on Linux

I am not sure if i can help you with your Project, but one of the things i have learned lately is that we can hardware-accelerate graphics-intensive CSS features by offloading them to the GPU for better rendering performance in the browser.

Right now most of the modern browsers are shipped with hardware acceleration. They will use it when they see that the DOM will benefit from it. A strong indicator is the 3D transformation.

Lets say that you wanna place your DOM with a position absolute and raise it above the parent container. Instead of that you could actually use -webkit-transform: translate3d(10px,10px,10px); That will resolve into a 3D rendering even if we don't animate the element at all. Even if you set zero values, it will still trigger the Graphic Acceleration.

TIP If you see any flickering then try adding -webkit-backface-visibility: hidden; and -webkit-perspective: 1000;

Now lets talk about the basics of CSS

You should know that the most important thing about how browsers READ your CSS selectors, is that they read them from right to left. That means that in the selector ul > li img[alt="test.png"] the first thing interpreted is img[alt="test.png"]. The first part is also referred as the "key selector".

So first things first, IDs are the most efficient, leaving universals the least. So you could rewrite your CSS code replacing the global ones (when aren't really needed) with IDs.

An other way of slowing your browser down is by adding the global selector upfront. (div#my-div) Something that Chrome is actually doing by default on inspect mode. That will GREATLY slow your browser down.

By far the worst case is the Descendant selectors. Even a selector that fails (when your selector doesn't match anything) is better than html body div ul li a { }

One more thing, that is extremely helpful and clean is the CSS3 selectors (:last-child). Even if those selectors help us and make our life easier, they rip your Browser down. You might not see any difference in performance on a small scale application, but when you introduce them in Enterprise Applications, you will notice that they are slowing down your Rendering.

So to sum up. I just told you that replacing all of your selectors with IDs and applying style on every single element by ID will make your app super fast, but on the other hand it will be a bit silly. It would be extremely hard to maintain and also non-semantic. Thus you should consider replacing most of the selectors with IDs but don't sacrifice semantics / maintainability for efficient CSS

Also you could check an interesting test here.

Now that i think of it, i should start with the CSS basics. Oh well, i hope i helped you even a little with your Project. Cheers

Elements within a face of a 3d css cube cannot be selected. Strange

After very very much struggle I finally managed to work around the not clickable and not selectable problem.

To make the sides of the cube selectable the 'perspective' property is needed (as @Cedric Reichenbach sugested); but as a side effect pixalation occures due to the perspective rendering. I tried to get rid of pixalation using a big perspective number (10000px), but the pixalation was still there. So by increasing the perspective number, the rendering z plane is going 'further away' giving the appearance of less perspective.

After two days of experimenting all kinds of stuff the way I 'tricked' perspective was by using an extremely large number for perspective. (perspective: 10000000px;) Now the pixalation effect is gone and the sides of the cube are clickable and selectable.

Here is a demonstration of the solution.

Backface visibility broken in Chrome (certain platforms/versions)

Alright, I made some research and apparently it depends on the machine and on the chrome version used.

As chromium follows chrome development, we can see this problem appears sometimes http://code.google.com/p/chromium/issues/detail?id=39044

I found 2 solutions I can't try since this CSS works on my computer.

• Trying to start chrome with this option : --enable-accelerated-compositing
• Trying https://stackoverflow.com/a/9276526/460368
• Waiting for a new version of chrome ;)

---

You can get inspire by that from cssplay

CSS :

#container {position: relative; height:362px; width: 282px; margin: 0 auto;
-webkit-perspective: 800px;
-moz-perspective: 800px;
}
#container div {position:absolute; left:0; top:0; width:242px; height: 322px; padding:20px; background:#463;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
}
#container div.lower {font-family: verdana, arial, sans-serif; background:#642;
background: -moz-linear-gradient(-45deg, #642, #864 50%, #642 100%);  
background: -webkit-gradient(linear, 0 0, 100% 100%, from(#642), color-stop(50%, #a86), color-stop(100%, #642));
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
#container div.lower h1 {font-size:20px; padding:0; margin:0; color:#fff; line-height:40px;}
#container div.lower p {font-size:11px; padding:0; margin:0; color:#eee; line-height:20px;}
#container div.lower a {color:#ff0;}

#container div.upper {
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
background: -moz-linear-gradient(-45deg, #463, #8a7 50%, #463 100%);  
background: -webkit-gradient(linear, 0 0, 100% 100%, from(#463), color-stop(50%, #8a7), color-stop(100%, #463)); 
}
#container div.upper img {border:1px solid #fff;}

#container:hover div.lower {
-moz-transform: rotateY(0);
-webkit-transform: rotateY(0);
}
#container:hover div.upper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}

HTML :

<div id="container">
    <div class="lower">

        <h1>The Barn Owl</h1>
        <p>(Tyto alba) is the most widely distributed species of owl, and one of the most widespread of all birds. It is also referred to as Common Barn Owl, to distinguish it from other species in the barn-owl family Tytonidae. These form one of two main lineages of living owls, the other being the typical owls (Strigidae). T. alba is found almost anywhere in the world except polar and desert regions, Asia north of the Alpide belt, most of Indonesia, and the Pacific islands.</p>
        <p>Source <a href="http://en.wikipedia.org/wiki/Barn_Owl">Wikipedia</a>
    </div>
    <div class="upper">
        <img src="cssplay7/owl.jpg" alt="Barn owl" />
    </div>

</div>

Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?

I found the "culprit".

I am using another codepen in my website's header :

https://codepen.io/saransh/pen/BKJun

<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
#stars
#stars2
#stars3
#title
  %span
    PURE CSS
  %br
  %span
    PARALLAX PIXEL STARS

Removing it makes the other animation smooth.

---

NONETHELESS:

This doesn't explain why everything is smooth in Firefox and Safari but not in Chrome.

Is Chrome less powerful ?

I filed a report to Chrome and hope they will answer here but there is no guarantee.

If someone can get an answer from Google / Chrome on this, I award him/her the bounty.

UPDATE 6:

Tried on the Opera browser. Exactly the same lag ! Now we know it's a problem with the BLINK rendering engine !

css3 transform not rendering properly on chrome (works on firefox)

Changing the position from static to absolute fixes the issue:

.master-board .widget-board {
  width: 750px;
  height: 300px;
  padding: 0;
  position: absolute;
  left: 50vw;
  top: 50vh;
  margin: -96px 0 0 -375px;
  z-index: 1000;
  transition: all 1.5s;
}

https://bugs.chromium.org/p/chromium/issues/detail?id=20574

---

Related Topics