Bug 109613

Summary: transform: rotateY() with perspective differs between firefox and chromium
Product: WebKit Reporter: mszamot
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED WONTFIX    
Severity: Normal CC: cbiesinger, dino, krit, kvserr, shawnsingh, simon.fraser, syoichi, thakis
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: PC   
OS: Linux   
Attachments:
Description Flags
Side by side difference between rendering of 'transform: rotateY(80deg): firefox vs chromium.
none
Testcase
none
Difference for ff and chromium: https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transforms none

mszamot
Reported 2013-02-12 14:19:00 PST
With the following simple html file I got different views in 'Mozilla Firefox 17.0.2' and 'Google Chrome 26.0.1403.0 dev' on Gentoo(Linux): <body> <div style="margin-top: 100px; -moz-transform: perspective(500px) rotateY(80deg); -webkit-transform: perspective(500px) rotateY(80deg); background-color: lime; width: 300px; height: 300px;" > HELLO WORLD </div> </body> I attach screen a side by side shot. Best regards, Marcin
Attachments
Side by side difference between rendering of 'transform: rotateY(80deg): firefox vs chromium. (42.17 KB, text/plain)
2013-02-12 14:20 PST, mszamot 		no flags
Details
Testcase (461 bytes, text/html)
2013-02-12 17:23 PST, Simon Fraser (smfr) 		no flags
Details
Difference for ff and chromium: https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transforms (130.71 KB, image/png)
2013-02-13 02:46 PST, mszamot 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
mszamot
Comment 1 2013-02-12 14:20:39 PST
Created attachment 187934 [details] Side by side difference between rendering of 'transform: rotateY(80deg): firefox vs chromium.
Dirk Schulze
Comment 2 2013-02-12 14:28:46 PST
(In reply to comment #1) > Created an attachment (id=187934) [details] > Side by side difference between rendering of 'transform: rotateY(80deg): firefox vs chromium. I checked in Chromium and Safari and it works on both the same as for Firefox. Can you try Chromium? Looking at the image, it looks like it does not do 3D transformations at all for you?
mszamot
Comment 3 2013-02-12 15:06:26 PST
(In reply to comment #2) > (In reply to comment #1) > > Created an attachment (id=187934) [details] [details] > > Side by side difference between rendering of 'transform: rotateY(80deg): firefox vs chromium. > > I checked in Chromium and Safari and it works on both the same as for Firefox. Can you try Chromium? Looking at the image, it looks like it does not do 3D transformations at all for you? I have also tried 'chromium 24.0.1312.52' and surf (from suckless.org build with webkit-gtk-1.8.3 (on Gentoo) and it works there as in google-chrome. Best regards, Marcin
Shawn Singh
Comment 4 2013-02-12 15:45:33 PST
The example works essentially the same for me on Firefox, Safari, Chrome stable, and Chrome canary (26.0.1410.0) Can you please give us more details about your system and setup? Perhaps there's some detail about your setup that causes this difference. In particular, can you try something that clearly indicates that chromium is using the accelerated compositor (otherwise 3d transforms are ignored anyway) such flags would be: --force-compositing-mode --show-fps-counter" or "--force-compositing-mode --show-composited-layer-borders" those flags will show some additional annotations on the screen that help to verify that chromium really is indeed in composited mode. And finally, can you please try Safari (Webkit nightly) as well? Perhaps this is a chromium-only issue and we would take the discussion back to crbug.com instead.
mszamot
Comment 5 2013-02-12 16:17:18 PST
(In reply to comment #4) > The example works essentially the same for me on Firefox, Safari, Chrome stable, and Chrome canary (26.0.1410.0) > > Can you please give us more details about your system and setup? Perhaps there's some detail about your setup that causes this difference. > > In particular, can you try something that clearly indicates that chromium is using the accelerated compositor (otherwise 3d transforms are ignored anyway) > such flags would be: --force-compositing-mode --show-fps-counter" > or "--force-compositing-mode --show-composited-layer-borders" > > those flags will show some additional annotations on the screen that help to verify that chromium really is indeed in composited mode. > > And finally, can you please try Safari (Webkit nightly) as well? Perhaps this is a chromium-only issue and we would take the discussion back to crbug.com instead. Here is what I captured on running google-chrome on the console with the requested flags: google-chrome --force-composition-mode --show-fps-counter /tmp/test.html [20965:21216:0212/235505:ERROR:nss_util.cc(492)] Error initializing NSS with a persistent database (sql:/home/coot/.pki/nssdb): NSS error code: -8187 [20965:21212:0212/235506:ERROR:object_proxy.cc(624)] Failed to get name owner. Got org.freedesktop.DBus.Error.NameHasNoOwner: Could not get owner of name 'org.chromium.Mtpd': no such name [20965:21212:0212/235506:ERROR:object_proxy.cc(624)] Failed to get name owner. Got org.freedesktop.DBus.Error.NameHasNoOwner: Could not get owner of name 'org.chromium.Mtpd': no such name [20965:21460:0212/235509:ERROR:connection.cc(677)] sqlite error 19, errno -2: PRIMARY KEY must be unique [20965:20965:0212/235512:ERROR:object_proxy.cc(529)] Failed to call method: org.chromium.Mtpd.EnumerateStorages: object_path= /org/chromium/Mtpd: org.freedesktop.DBus.Error.ServiceUnknown: The name org.chromium.Mtpd was not provided by any .service file google-chrome --force-compositing-mode --show-composited-layer-borders /tmp/test.html [11479:11558:0213/000430:ERROR:nss_util.cc(492)] Error initializing NSS with a persistent database (sql:/home/coot/.pki/nssdb): NSS error code: -8187 [11479:11554:0213/000433:ERROR:object_proxy.cc(624)] Failed to get name owner. Got org.freedesktop.DBus.Error.NameHasNoOwner: Could not get owner of name 'org.chromium.Mtpd': no such name [11479:11554:0213/000433:ERROR:object_proxy.cc(624)] Failed to get name owner. Got org.freedesktop.DBus.Error.NameHasNoOwner: Could not get owner of name 'org.chromium.Mtpd': no such name [11565:11565:0213/000437:ERROR:nss_util.cc(492)] Error initializing NSS with a persistent database (sql:/home/coot/.pki/nssdb): NSS error code: -8187 [11479:11479:0213/000437:ERROR:object_proxy.cc(529)] Failed to call method: org.chromium.Mtpd.EnumerateStorages: object_path= /org/chromium/Mtpd: org.freedesktop.DBus.Error.ServiceUnknown: The name org.chromium.Mtpd was not provided by any .service files [11479:11692:0213/000438:ERROR:connection.cc(677)] sqlite error 19, errno -2: PRIMARY KEY must be unique How I can install Safari on Linux, are there some instructions out there? Thanks for your help, Marcin
Simon Fraser (smfr)
Comment 6 2013-02-12 17:19:46 PST
Firefox's rendering shows an isometric rectangle, which is wrong. I think the FF rendering is incorrect.
Simon Fraser (smfr)
Comment 7 2013-02-12 17:23:14 PST
Created attachment 187972 [details] Testcase
mszamot
Comment 8 2013-02-13 02:44:46 PST
(In reply to comment #7) > Created an attachment (id=187972) [details] > Testcase There are 3d cubes on page: https://developer.mozilla.org/en-US/docs/CSS/backface-visibility In the attached png image is how chromium and ff are rendering them. Chrome renders them in the same way as chromium. Clearly the 3d comopsiting is turned off even with --force-compositing-mode . I also tried running chromium with (in various combinations) --enable-software-compositing-gl-adapter, --enable-fixed-position-compositing, --enable-browser-plugin-compositing and --enable-threaded-compositing . None of them helped to solve the issue. Best regards, Marcin
mszamot
Comment 9 2013-02-13 02:46:20 PST
Created attachment 188045 [details] Difference for ff and chromium: https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transforms
Nico Weber
Comment 10 2013-02-13 08:45:19 PST
about:gpu in chromium will likely inform you that your graphics card driver doesn't support rendering 3d contents. If you enable "Override software rendering list" on about:flags, it'll likely start working, at the expense of making your system unstable.
mszamot
Comment 11 2013-02-13 10:10:28 PST
Thank you, indeed enabling this flag turned on 3d rendering. Best regards, Marcin Szamotulski (In reply to comment #10) > about:gpu in chromium will likely inform you that your graphics card driver doesn't support rendering 3d contents. If you enable "Override software rendering list" on about:flags, it'll likely start working, at the expense of making your system unstable.
Note You need to log in before you can comment on or make changes to this bug.