3D CSS Transforms not working

[martinzaleski]

Hello!
When I try yo capture a page where CSS 3D Transforms are applied to certain elements, it doesn't look good. I think I've read PhantomJS does not support 3D Transforms yet.

Are you planning to support this feature or is there any workaround you could think of?

Thank you very much and keep up the good work!
Martin

[bmustata]

Any update on this issue?

[davidgorges]

There's currently no support for 3D CSS transformations as it's saying on "Supported Web Standards":

CSS 3-D needs a perspective-correct implementation of texture mapping. It can't be implemented without a penalty in performance.

But:

Each of the above feature may be supported in the future if the technical challenges associated with the implementations are solved. Until then, do not rely on those features.

[dcworldwide]

Any update on this? Trying to record an animation that uses 3d transforms.

[bmustata]

Currently this is not supported and maybe will be supported in the future.

[mbharathi4747]

Any update on this issue?

[zackw]

WebKit core does support 3D transforms, but it is not clear to me what we would have to do to make them available in PhantomJS; there is no obvious toggle at the Qt level. And, like other 3D features (e.g. WebGL) activating the feature might suddenly cause the program to grow a dependency on a GPU.

PhantomJS core development is extremely manpower-limited. We are not likely to dig into this in the near future. If one of you wants to figure out what needs doing and send us a pull request, that would be very helpful.

[fredericlam]

Hi everyone.

A simple trick that worked for me after seeing that 3D css transform does not work with phantomJS.
After googling for hours, I just needed a simple feature, which was a simple "translate":

• in my svg file, the property style="transform:translate(X,Y)" works in the browser, but does not if I want to catch a screenshot with phantomJS.
• simply turn it to an attribute, so : transform="translate(X,Y)" and phantomJS understand it.

It saved me from coding an alternative to it.

[miriti]

The solution that helped me:
Simply added -webkit-transfrom css property along with the transform property (with the same value) and it did the trick.

[kachkaev]

Quite surprised that this issue is still open after ≈ 2 years. No way to render leaflet map markers because of this :–(

[pouu69]

-webkit-transfrom is working very welll thx

[martinzaleski]

Hello guys. -webkit-transform works for translate, scale, rotate, but DOES NOT work for rotateY, which is rotating in 3D. If you guys have any progress or workarounds with regards to this, please let me know. I’ve been more than 2 years now without being able to solve this… :( Thanks

[myst729]

Even -webkit- works, it's still buggy, especially with transition.

[vitallium]

Could you please try again with 2.5 binary? Thanks!

[myst729]

I'm using nightwatch to run some e2e tests. Tried 2.5.0 beta, the same as 2.1.1, no luck.

In my project, when the menu button is clicked, the element div.menu will be appended an extra class name .menu-open. A very typical side menu slides in from left.

.menu {
  transform: translate(-200px, 0);
  transition: transform .3s ease;
}
.menu-open {
  transform: translate(0, 0);
}

In my test case I check whether div.menu is in viewport before and after clicked (with proper latency of course, as the transition takes time). This works fine in Chrome and Firefox but fails in Phantom. Like said, Phantom needs -webkit- so I added it.

.menu {
  -webkit-transform: translate(-200px, 0);
  transform: translate(-200px, 0);
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
}
.menu-open {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

The class name is added correctly, but getComputedStyle() shows that transform from .menu-open is not actually applied, still fails. Until I finally get to the trick:

.menu {
  -webkit-transform: translate(-200px, 0);
  transform: translate(-200px, 0);
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
}
.menu-open {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  /* The following two lines are the trick */
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
}

This works as expected in Phantom 2.1.1 but quite weird. And I think it's not right to code like this just to fool the tests.

[muditjuneja]

" -webkit-transform" worked. :)

[affanazul]

hey how can i use css transform : matrix3d('values') , i am unable to use in webshot with phantomjs, i feel it dosent support .plz help

[hyrious]

I've noticed (maybe) a bug just now. Using perspective border: 2px solid blue on an element, then it's border-color will cover the whole background. Try capture:

<!DOCTYPE html>
  <style>
    .a {
      margin: 30px; padding: 20px;
      display: inline-block;
      font-size: 2rem; font-weight: 900;
      border: 2px solid #369;
      border-radius: 16px;
      background-color: #EEE;
      box-shadow: 0 0 6px black;
      -webkit-transform: perspective(600px) rotateX(-10deg) rotateY(10deg);
      transform: perspective(600px) rotateX(-10deg) rotateY(10deg);
    }
  </style>
  <div class="a">Lorem ipsum</div>

And this (bug) will not happen when border-width <= 1px or border-style != solid or not using perspective. (occurs only when border-width > 1 and border-style: solid and transform: perspective)
Here the sample capture:
(real browser)
(phantomjs)
BTW, the box-shadow is also missing...

[ghazalashahid]

-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;

This worked in my case, you can just adjust the rotation accordingly

[stale]

Due to our very limited maintenance capacity (see #14541 for more details), we need to prioritize our development focus on other tasks. Therefore, this issue will be automatically closed. In the future, if we see the need to attend to this issue again, then it will be reopened. Thank you for your contribution!