preserve3d broken in Google Chrome on Linux

[gvsmirnov]

Hi, I've run into the following issue:

The contents of step with data-rotate-y is not displayed on a Linux laptop in Google Chrome, though it is fine on OS X and Windows. Also fine (albeit slow) in Firefox.

Here's an example: http://gvsmirnov.ru/docs/presentations/jmpress-test/ In this example, step-1 and step-2 are visible, but when I move on to step-3 and step-4 (which have data-rotate-x and data-rotate-y), they are not seen

Here are the browser details:

appCodeName          : Mozilla
appName              : Netscape
appVersion           : 5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like G
ecko) Chrome/31.0.1650.57 Safari/537.36
cookieEnabled        : true
language             : en-US
onLine               : true
platform             : Linux x86_64
product              : Gecko
productSub           : 20030107
userAgent            : Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML
, like Gecko) Chrome/31.0.1650.57 Safari/537.36
vendor               : Google Inc.

And the system details:

Linux forest 3.11.0-13-generic #20-Ubuntu SMP Wed Oct 23 07:38:26 UTC 2013 x86_64 x86_64 x86_64 GNU/Linux
Processor: Intel® Core™ i3 CPU M 380 @ 2.53GHz × 4 
Graphics: Gallium 0.4 on AMD REDWOOD

[gvsmirnov]

Okay, so I have digged into this a little, and it seems to be a bug in Chrome implementation itself. If we have a parent element with, say, rotateX(90deg) and a child element with rotateX(-90deg), the child element will not be seen (but only on Linux, as far as I can tell). The child's 3d transform will be ignored altogether, since transform-style: preserve-3d; is not enabled if gpu is not suitable.

Here's an example: http://jsfiddle.net/gvsmirnov/yKTpu/2/

I will look for a workaround, but it might take a while.

[DeanMarkTaylor]

Just out of interest I tested a couple of browsers here on my Windows 7 box, here are the results:

Test 1: http://jsfiddle.net/gvsmirnov/yKTpu/2/ (success being text visible) Test 2: http://gvsmirnov.ru/docs/presentations/java-concurrency-intro-au/#/step-57 (success being the step displays and navigates to next displaying)

Test 1: Chrome: OK, Firefox: OK, IE11: FAIL Test 2: Chrome: OK, Firefox: OK, IE11: FAIL (although other parts of the presentation are visible and animate when progressing through steps)

Browser details Chrome: "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.57 Safari/537.36" Firefox: "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:25.0) Gecko/20100101 Firefox/25.0" IE 11: "Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.3; rv:11.0) like Gecko"

[gvsmirnov]

@DeanMarkTaylor thanks for that!

A further investigation shows that some GPUs do not properly support transform-style: preserve-3d;, in which case Chrome outright ignores it. But it still reports that the property is supported (e.g. see http://stackoverflow.com/questions/17219769/tests-for-preserve-3d-are-not-working-on-android-via-browserstack)

So the obvious idea is to emulate it by manually re-calculating nested rotations, but the problem is we shouldn't emulate if GPU actually supports it to avoid dreadful slowdowns. And I can't think of a way to detect if it really really supports it (yet). Could add it as a separate parameter for jmpress initialization,

[DeanMarkTaylor]

I knocked together a quick test case here using the JavaScript test from CoderWall: http://jsfiddle.net/bZ5sE/3/

This JavaScript test successfully for preserve-3d support on all my test case browsers listed previously.

Also recently Modernizer added a test for preserve-3d support: https://github.com/Modernizr/Modernizr/issues/762 I don't think it's in release yet.

@sokra Should a check for preserve-3d support be added to jmpress?

[DeanMarkTaylor]

IE's lack of support for preserve-3d is noted on http://caniuse.com/#feat=transforms3d

[sokra]

@DeanMarkTaylor @gvsmirnov Thanks for your investigation. It seems that we (incorrectly) infer 3D support from the browser support of perspective. There should be a check for perserve-3d too, as we need nested transforms (for the camera). Fallback to 2d mode is more appropriate (This would mean less 3D but visible elements).

A pull request for such a check is welcome. Please don't add a polyfill for getComputedStyle and instead infer no support.

---

Instead of using nested transfroms we could apply the camera transform to each step. This have performance implications and the drive of the camera would be different. This would require big refactoring... I do not think it is worth it

[gvsmirnov]

@DeanMarkTaylor sadly, the test case on jsfiddle that you provided doesn't work for me. That is, I see "Looks like we have preserve-3d support - you should see red text below", but no actual red text follows.

@DeanMarkTaylor @sokra The problem is that while the browser itself reports that it supports preserve-3d, it actually does not render it on some hardware. I have asked people around, and they have been able to reproduce the same problem on most linux boxes, but not all. So, the key thing is the hardware.

So, adding this will help in the case of IE, but it will not solve the initial issue. Maybe, a bug report to Chromium/Webkit is in order? Since if they don't support preserve-3d on a given machine, they should report so, not just silently render imprecise pages.

@sokra I was actually thinking that falling back to applying the camera to each step is preferable, since just making stuff 2D will likely cause some steps to overlay others. I haven't looked into the sources yet, but should that really be that big of a refactoring?

P.S. Maybe, the issue should be renamed to something along the lines of "Add a workaround for browsers that do not support preserve-3d"?

[sokra]

Chrome on Windows (same PC FF works)

[DeanMarkTaylor]

Clearly the CoderWall implementation of this check doesn't work and / or new browser bugs.

[gvsmirnov]

Corresponding issue on Webkit bugzilla: https://bugs.webkit.org/show_bug.cgi?id=125080

[gvsmirnov]

@sokra Could you post the configuration of the windows box where this reproduced?

[sokra]

When Chrome is started it does work for some time. Then it breaks, until Chrome is restarted.

Here is chrome://gpu/ output after it breaks.

Graphics Feature Status

Canvas: Software only. Hardware acceleration disabled. Compositing: Software only, hardware acceleration unavailable 3D CSS: Software only, hardware acceleration unavailable CSS Animation: Software only, hardware acceleration unavailable WebGL: Software only, hardware acceleration unavailable WebGL multisampling: Software only, hardware acceleration unavailable Flash 3D: Software only, hardware acceleration unavailable Flash Stage3D: Software only, hardware acceleration unavailable Flash Stage3D Baseline profile: Software only, hardware acceleration unavailable Texture Sharing: Software only, hardware acceleration unavailable Video Decode: Software only, hardware acceleration unavailable Video: Software only, hardware acceleration unavailable

Problems Detected

Disable 3D (but not Stage3D) in Flash on XP: 134885 Hardware video decode is only supported in win7+.: 159458 Accelerated 2D Canvas is not supported on WinXP.: 175149 Accelerated 2D canvas is unavailable: either disabled at the command line or not supported by the current system. Force compositing mode is off, either disabled at the command line or not supported by the current system.

Driver Bug Workarounds

clear_alpha_in_readpixels disable_angle_instanced_arrays disable_d3d11 exit_on_context_lost set_texture_filter_before_generating_mipmap use_current_program_after_successful_link

Version Information

Data exported 3.12.2013 10:24:16 Chrome version Chrome/31.0.1650.57 Operating system Windows NT 5.2 SP2 Software rendering list version 6.11 Driver bug list version 2.22 ANGLE revision 2446 2D graphics backend Skia

Performance Information

Graphics 0.0 Gaming 0.0 Overall 0.0

Driver Information

Initialization time 250 Sandboxed true GPU0 VENDOR = 0x10de, DEVICE= 0x05e3 Optimus false AMD switchable false Driver vendor NVIDIA Driver version 6.14.13.623 Driver date 8-30-2012 Pixel shader version 3.0 Vertex shader version 3.0 Machine model
GL version 2.0 GL_VENDOR Google Inc. GL_RENDERER ANGLE (NVIDIA GeForce GTX 285 Direct3D9 vs_3_0 ps_3_0) GL_VERSION OpenGL ES 2.0 (ANGLE 1.2.0.2446) GL_EXTENSIONS GL_OES_element_index_uint GL_OES_packed_depth_stencil GL_OES_get_program_binary GL_OES_rgb8_rgba8 GL_OES_standard_derivatives GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_OES_texture_float GL_OES_texture_float_linear GL_OES_texture_npot GL_EXT_occlusion_query_boolean GL_EXT_read_format_bgra GL_EXT_robustness GL_EXT_texture_compression_dxt1 GL_EXT_texture_filter_anisotropic GL_EXT_texture_format_BGRA8888 GL_EXT_texture_storage GL_EXT_frag_depth GL_ANGLE_depth_texture GL_ANGLE_framebuffer_blit GL_ANGLE_framebuffer_multisample GL_ANGLE_instanced_arrays GL_ANGLE_pack_reverse_row_order GL_ANGLE_texture_compression_dxt3 GL_ANGLE_texture_compression_dxt5 GL_ANGLE_texture_usage GL_ANGLE_translated_shader_source GL_NV_fence Window system binding vendor Google Inc. Window system binding version 1.4 (ANGLE 1.2.0.2446) Window system binding extensions EGL_EXT_create_context_robustness EGL_ANGLE_query_surface_pointer EGL_NV_post_sub_buffer Reset notification strategy 0x8252

Diagnostics

... loading ...

Log Messages

[7060:6000:1202/164605:ERROR:gles2_cmd_decoder.cc(9076)] : Onscreen context lost via ARB/EXT_robustness. Reset status = GL_UNKNOWN_CONTEXT_RESET_EXT [7060:6000:1202/164605:ERROR:gles2_cmd_decoder.cc(2740)] : GLES2DecoderImpl: Context lost during MakeCurrent. [7060:6000:1202/164605:ERROR:gles2_cmd_decoder.cc(2745)] : Exiting GPU process because some drivers cannot reset a D3D device in the Chrome GPU process sandbox. GpuProcessHostUIShim: The GPU process exited normally. Everything is okay. [4900:5360:1202/164607:ERROR:gl_surface_egl.cc(131)] : eglInitialize failed with error UNKNOWN [4900:5360:1202/164607:ERROR:gl_surface_win.cc(54)] : GLSurfaceEGL::InitializeOneOff failed. GpuProcessHostUIShim: The GPU process exited normally. Everything is okay. GpuProcessHostUIShim: The GPU process crashed! GpuProcessHostUIShim: The GPU process crashed! GpuProcessHostUIShim: The GPU process crashed! GpuProcessHostUIShim: The GPU process exited normally. Everything is okay. GpuProcessHostUIShim: The GPU process exited normally. Everything is okay. GpuProcessHostUIShim: The GPU process exited normally. Everything is okay. GpuProcessHostUIShim: The GPU process exited normally. Everything is okay. GpuProcessHostUIShim: The GPU process exited normally. Everything is okay. GpuProcessHostUIShim: The GPU process exited normally. Everything is okay. GpuProcessHostUIShim: The GPU process exited normally. Everything is okay. GpuProcessHostUIShim: The GPU process exited normally. Everything is okay. GpuProcessHostUIShim: The GPU process exited normally. Everything is okay. GpuProcessHostUIShim: The GPU process exited normally. Everything is okay. GpuProcessHostUIShim: The GPU process exited normally. Everything is okay. GpuProcessHostUIShim: The GPU process exited normally. Everything is okay. GpuProcessHostUIShim: The GPU process exited normally. Everything is okay. GpuProcessHostUIShim: The GPU process exited normally. Everything is okay. GpuProcessHostUIShim: The GPU process exited normally. Everything is okay.

[sokra]

After restarting Chrome, it does work again:

Graphics Feature Status

Canvas: Software only. Hardware acceleration disabled. Compositing: Hardware accelerated on all pages and threaded 3D CSS: Hardware accelerated CSS Animation: Accelerated and threaded WebGL: Hardware accelerated WebGL multisampling: Hardware accelerated Flash 3D: Unavailable. Hardware acceleration unavailable Flash Stage3D: Hardware accelerated Flash Stage3D Baseline profile: Hardware accelerated Texture Sharing: Hardware accelerated Video Decode: Software only, hardware acceleration unavailable Video: Hardware accelerated

Problems Detected

Disable 3D (but not Stage3D) in Flash on XP: 134885 Hardware video decode is only supported in win7+.: 159458 Accelerated 2D Canvas is not supported on WinXP.: 175149 Accelerated 2D canvas is unavailable: either disabled at the command line or not supported by the current system.

Driver Bug Workarounds

clear_alpha_in_readpixels disable_angle_instanced_arrays disable_d3d11 exit_on_context_lost set_texture_filter_before_generating_mipmap use_current_program_after_successful_link

Version Information

Data exported 3.12.2013 10:28:28 Chrome version Chrome/31.0.1650.57 Operating system Windows NT 5.2 SP2 Software rendering list version 6.11 Driver bug list version 2.22 ANGLE revision 2446 2D graphics backend Skia

Performance Information

Graphics 0.0 Gaming 0.0 Overall 0.0

Driver Information

Initialization time 240 Sandboxed false GPU0 VENDOR = 0x10de, DEVICE= 0x05e3 Optimus false AMD switchable false Driver vendor NVIDIA Driver version 6.14.13.623 Driver date 8-30-2012 Pixel shader version 3.0 Vertex shader version 3.0 Machine model
GL version 2.0 GL_VENDOR Google Inc. GL_RENDERER ANGLE (NVIDIA GeForce GTX 285 Direct3D9 vs_3_0 ps_3_0) GL_VERSION OpenGL ES 2.0 (ANGLE 1.2.0.2446) GL_EXTENSIONS GL_OES_element_index_uint GL_OES_packed_depth_stencil GL_OES_get_program_binary GL_OES_rgb8_rgba8 GL_OES_standard_derivatives GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_OES_texture_float GL_OES_texture_float_linear GL_OES_texture_npot GL_EXT_occlusion_query_boolean GL_EXT_read_format_bgra GL_EXT_robustness GL_EXT_texture_compression_dxt1 GL_EXT_texture_filter_anisotropic GL_EXT_texture_format_BGRA8888 GL_EXT_texture_storage GL_EXT_frag_depth GL_ANGLE_depth_texture GL_ANGLE_framebuffer_blit GL_ANGLE_framebuffer_multisample GL_ANGLE_instanced_arrays GL_ANGLE_pack_reverse_row_order GL_ANGLE_texture_compression_dxt3 GL_ANGLE_texture_compression_dxt5 GL_ANGLE_texture_usage GL_ANGLE_translated_shader_source GL_NV_fence Window system binding vendor Google Inc. Window system binding version 1.4 (ANGLE 1.2.0.2446) Window system binding extensions EGL_EXT_create_context_robustness EGL_ANGLE_query_surface_pointer EGL_NV_post_sub_buffer Reset notification strategy 0x8252

Diagnostics

0 b3DAccelerationEnabled true b3DAccelerationExists true bAGPEnabled true bAGPExistenceValid true bAGPExists true bCanRenderWindow true bDDAccelerationEnabled true bDriverBeta false bDriverDebug false bDriverSigned false bDriverSignedValid false bNoHardware false dwBpp 32 dwDDIVersion 9 dwHeight 1200 dwRefreshRate 60 dwWHQLLevel 0 dwWidth 1920 iAdapter 0 lDriverSize 12533120 lMiniVddSize 12491136 szAGPStatusEnglish Enabled szAGPStatusLocalized Aktiviert szChipType GeForce GTX 285 szD3DStatusEnglish Enabled szD3DStatusLocalized Aktiviert szDACType Integrated RAMDAC szDDIVersionEnglish 9 (or higher) szDDIVersionLocalized 9 (oder höher) szDDStatusEnglish Enabled szDDStatusLocalized Aktiviert szDXVAModes ModeMPEG2_C ModeMPEG2_D szDescription NVIDIA GeForce GTX 285 szDeviceId 0x05E3 szDeviceIdentifier {D7B71E3E-46A3-11CF-9D59-8C3200C2CB35} szDeviceName .\DISPLAY1 szDisplayMemoryEnglish 1024.0 MB szDisplayMemoryLocalized 1024.0 MB szDisplayModeEnglish 1920 x 1200 (32 bit) (60Hz) szDisplayModeLocalized 1920 x 1200 (32 bit) (60Hz) szDriverAttributes Endgültig Verkauf szDriverDateEnglish 8/30/2012 20:11:00 szDriverDateLocalized 30.08.2012 20:11:00 szDriverLanguageEnglish English szDriverLanguageLocalized Englisch szDriverName nv4_disp.dll szDriverSignDate
szDriverVersion 6.14.0013.0623 szKeyDeviceID Enum\PCI\VEN_10DE&DEV_05E3&SUBSYS_12813842&REV_A1 szKeyDeviceKey \Registry\Machine\System\CurrentControlSet\Control\Video{C4AEF009-170F-4201-B7A5-9319685F6B2F}\0000 szManufacturer NVIDIA szMiniVdd nv4_mini.sys szMiniVddDateEnglish 8/30/2012 20:11:00 szMiniVddDateLocalized 30.08.2012 20:11:00 szMonitorMaxRes 1280,1024 szMonitorName HP LP1965 LCD Monitor szNotesEnglish No problems found. To test DirectDraw functionality, click the "Test DirectDraw" button above. To test Direct3D functionality, click the "Test Direct3D" button above. szNotesLocalized Es wurden keine Probleme gefunden. Klicken Sie auf "DirectDraw testen", um die DirectDraw-Funktionalität zu testen. Klicken Sie auf "Direct3D testen", um die Direct3D-Funktionalität zu testen. szRegHelpText
szRevision
szRevisionId 0x00A1 szSubSysId 0x12813842 szTestResultD3D7English Not run szTestResultD3D7Localized Nicht ausgeführt szTestResultD3D8English Not run szTestResultD3D8Localized Nicht ausgeführt szTestResultD3D9English Not run szTestResultD3D9Localized Nicht ausgeführt szTestResultDDEnglish Not run szTestResultDDLocalized Nicht ausgeführt szVdd Nicht zutreffend szVendorId 0x10DE 1 b3DAccelerationEnabled true b3DAccelerationExists true bAGPEnabled true bAGPExistenceValid true bAGPExists true bCanRenderWindow true bDDAccelerationEnabled true bDriverBeta false bDriverDebug false bDriverSigned false bDriverSignedValid false bNoHardware false dwBpp 32 dwDDIVersion 9 dwHeight 1024 dwRefreshRate 60 dwWHQLLevel 0 dwWidth 1280 iAdapter 1 lDriverSize 12533120 lMiniVddSize 12491136 szAGPStatusEnglish Enabled szAGPStatusLocalized Aktiviert szChipType GeForce GTX 285 szD3DStatusEnglish Enabled szD3DStatusLocalized Aktiviert szDACType Integrated RAMDAC szDDIVersionEnglish 9 (or higher) szDDIVersionLocalized 9 (oder höher) szDDStatusEnglish Enabled szDDStatusLocalized Aktiviert szDXVAModes ModeMPEG2_C ModeMPEG2_D szDescription NVIDIA GeForce GTX 285 szDeviceId 0x05E3 szDeviceIdentifier {D7B71E3E-46A3-11CF-9D59-8C3200C2CB35} szDeviceName .\DISPLAY3 szDisplayMemoryEnglish 1024.0 MB szDisplayMemoryLocalized 1024.0 MB szDisplayModeEnglish 1280 x 1024 (32 bit) (60Hz) szDisplayModeLocalized 1280 x 1024 (32 bit) (60Hz) szDriverAttributes Endgültig Verkauf szDriverDateEnglish 8/30/2012 20:11:00 szDriverDateLocalized 30.08.2012 20:11:00 szDriverLanguageEnglish English szDriverLanguageLocalized Englisch szDriverName nv4_disp.dll szDriverSignDate
szDriverVersion 6.14.0013.0623 szKeyDeviceID Enum\PCI\VEN_10DE&DEV_05E3&SUBSYS_12813842&REV_A1 szKeyDeviceKey \Registry\Machine\System\CurrentControlSet\Control\Video{C4AEF009-170F-4201-B7A5-9319685F6B2F}\0001 szManufacturer NVIDIA szMiniVdd nv4_mini.sys szMiniVddDateEnglish 8/30/2012 20:11:00 szMiniVddDateLocalized 30.08.2012 20:11:00 szMonitorMaxRes 1280,1024 szMonitorName HP LP1965 LCD Monitor szNotesEnglish No problems found. To test DirectDraw functionality, click the "Test DirectDraw" button above. To test Direct3D functionality, click the "Test Direct3D" button above. szNotesLocalized Es wurden keine Probleme gefunden. Klicken Sie auf "DirectDraw testen", um die DirectDraw-Funktionalität zu testen. Klicken Sie auf "Direct3D testen", um die Direct3D-Funktionalität zu testen. szRegHelpText
szRevision
szRevisionId 0x00A1 szSubSysId 0x12813842 szTestResultD3D7English Not run szTestResultD3D7Localized Nicht ausgeführt szTestResultD3D8English Not run szTestResultD3D8Localized Nicht ausgeführt szTestResultD3D9English Not run szTestResultD3D9Localized Nicht ausgeführt szTestResultDDEnglish Not run szTestResultDDLocalized Nicht ausgeführt szVdd Nicht zutreffend szVendorId 0x10DE

Log Messages

GpuProcessHostUIShim: The GPU process exited normally. Everything is okay.