Open gvsmirnov opened 10 years ago
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.
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"
@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,
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?
IE's lack of support for preserve-3d
is noted on http://caniuse.com/#feat=transforms3d
@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
@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
"?
Chrome on Windows (same PC FF works)
Clearly the CoderWall implementation of this check doesn't work and / or new browser bugs.
Corresponding issue on Webkit bugzilla: https://bugs.webkit.org/show_bug.cgi?id=125080
@sokra Could you post the configuration of the windows box where this reproduced?
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.
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
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.
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
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
Graphics 0.0 Gaming 0.0 Overall 0.0
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
... loading ...
[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.
After restarting Chrome, it does work again:
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
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.
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
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
Graphics 0.0 Gaming 0.0 Overall 0.0
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
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
GpuProcessHostUIShim: The GPU process exited normally. Everything is okay.
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:
And the system details: