CSS transform3d don't work in chrome
Reported by
mdizaj...@gmail.com,
Oct 19 2017
|
||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:56.0) Gecko/20100101 Firefox/56.0 Steps to reproduce the problem: 1. go to https://podne-obloge.com/bergo/index.php 2. and try to save image, pressing button "Save design" 3. you will see that FF will save img as expected with perspective, but Chrome with save image with all parameters from transform3d except perpective (when you switch to 2d view, everything work fine on all browsers, problem is just "3d" view of the field) What is the expected behavior? To save image as it show in browser, sport field should be in "3d", but somehow from all parapeters in transform3d line he just lost perpective. When you take png that is saved from chrome and put in photoshop and just add perspective you got exactly what you need... What went wrong? It seems to me that Chrom somehow dont read whole trransform3d line, i even try with simplier solution with rotation on svg and perspectiv on parent div, still same problem, in browser it show normal in "3d" but when you want to save he just lose perspective... You can see images: 1.png is from program, 2.png is saved from firefox and 3.png is saved from Chrome. Problematic part of code: "<svg id="bergoCourt" width=1600 height=600 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xmlns:ev="http://www.w3.org/2001/xml-events" style="overflow: visible; transform: matrix3d(1,-0.03,0.00,0,-0.03,0.5,0.87,-0.001,0,-0.87,0.5,0,-60,140,0,1); "> <rect id="fieldBase" width="1300" height="370" x="0" y="0" style="stroke-width: 8; stroke: black; fill: rgb(0, 106, 179);"></rect> </svg>" Especialy this part: "style="overflow: visible; transform: matrix3d(1,-0.03,0.00,0,-0.03,0.5,0.87,-0.001,0,-0.87,0.5,0,-60,140,0,1); "", where FF save IMG 1:1, and Chrome like he can't see part with perspective. Did this work before? N/A Does this work in other browsers? Yes Chrome version: <Copy from: 'about:version'> Channel: stable OS Version: 10.0 Flash Version: Shockwave Flash 27.0 r0 Please help me! :)
,
Oct 23 2017
In PaintLayer::RenderableTransform perhaps?
,
Oct 23 2017
Yep, that would be it. We make the transform affine for printing and drag, because we can't render perspective in printed content. What, if anything, would make that possible?
,
Oct 24 2017
Why can we not render perspective in printed content? It looks like this got encoded as a PNG. The encoder will take whatever pixels you give it and encode them.
,
Oct 24 2017
PDFs don't do perspective transforms.
,
Oct 25 2017
What exactly is going on, fs@ and schenney@? We remove the transform for PDF, but it's not obvious to me why PDF is relevant, because this got saved as a png. Are we going through PDF to get to a png?
,
Oct 25 2017
It looks like this is cloning and massaging the <svg> fragment and then attempting to render it via an <img>. 3d transforms will not work in such a context (IIRC there we disable "accelerated compositing", which is needed for 3d transforms.) Updating component.
,
Oct 25 2017
Smaller TC: http://jsfiddle.net/pvxtdkd1/1/
,
Oct 25 2017
Even simpler example:
<svg style="transform:matrix3d(
1, 0, 0, 0,
0, 1, 0, -0.0005,
0, 0, 1, 0,
0, 0, 0, 1);" width=600 height=600>
<rect width="400" height="400"
x="10" y="10" style="fill:gray;">
</rect></svg>
I looked at it and Chrome sends the following to Skia in a printing context:
SkMatrix m;
m.setAll(1, -0.15, 53, 0, 0.85, 53, 0, 0, 1);
canvas->concat(m);
canvas->drawRect({10, 10, 410, 410}, paint);
,
Oct 25 2017
Blink does not currently know how to output 3D matrices within a single display list. Instead they are converted to affine.
,
Oct 31
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Nov 2
Works now! |
||||||
►
Sign in to add a comment |
||||||
Comment 1 by meade@chromium.org
, Oct 20 2017