Issue metadata
Sign in to add a comment
|
Jerky animations
Reported by
servi...@locoticket.com,
Mar 11 2016
|
||||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36 Example URL: https://www.locoticket.com/ Steps to reproduce the problem: 1. Visit: https://www.locoticket.com/ 2. The main image on that webpage uses a CSS animation 3. The animation should run smoothly but looks very jerky on my system. I have checked this on Firefox and it runs perfectly ok there. What is the expected behavior? Animation should run smoothly What went wrong? Animation is jerky Does it occur on multiple sites: N/A Is it a problem with a plugin? No Did this work before? Yes I use Chrome everyday and I have only detected this problem on current build 49.0.2623.87 m Does this work in other browsers? Yes Chrome version: 49.0.2623.87 Channel: stable OS Version: 6.1 (Windows 7, Windows Server 2008 R2) Flash Version: Shockwave Flash 21.0 r0 I am not too sure if this is related to the following issue: https://bugs.chromium.org/p/chromium/issues/detail?id=422000 Below is diagnostics of the GPU (note it says: "Rasterization: Software only. Hardware acceleration disabled" which I don't know could be the cause for the jerky animations on my system) Graphics Feature Status Canvas: Hardware accelerated Flash: Hardware accelerated Flash Stage3D: Hardware accelerated Flash Stage3D Baseline profile: Hardware accelerated Compositing: Hardware accelerated Multiple Raster Threads: Disabled Rasterization: Software only. Hardware acceleration disabled Video Decode: Hardware accelerated Video Encode: Hardware accelerated WebGL: Hardware accelerated Driver Bug Workarounds clear_uniforms_before_first_program_use disable_d3d11 disable_discard_framebuffer disable_msaa_on_non_webgl_contexts exit_on_context_lost force_cube_complete scalarize_vec_and_mat_constructor_args texsubimage_faster_than_teximage Problems Detected Some drivers are unable to reset the D3D device in the GPU process sandbox Applied Workarounds: exit_on_context_lost TexSubImage is faster for full uploads on ANGLE Applied Workarounds: texsubimage_faster_than_teximage Clear uniforms before first program use on all platforms: 124764, 349137 Applied Workarounds: clear_uniforms_before_first_program_use Always rewrite vec/mat constructors to be consistent: 398694 Applied Workarounds: scalarize_vec_and_mat_constructor_args Old Intel drivers cannot reliably support D3D11: 363721 Applied Workarounds: disable_d3d11 ANGLE crash on glReadPixels from incomplete cube map texture: 518889 Applied Workarounds: force_cube_complete On Intel GPUs MSAA performance is not acceptable for GPU rasterization: 527565 Applied Workarounds: disable_msaa_on_non_webgl_contexts Framebuffer discarding can hurt performance on non-tilers: 570897 Applied Workarounds: disable_discard_framebuffer Accelerated rasterization has been disabled, either via about:flags or command line. Disabled Features: rasterization Raster is using a single thread. Disabled Features: multiple_raster_threads GpuMemoryBuffer Status ATC Software only ATCIA Software only DXT1 Software only DXT5 Software only ETC1 Software only R_8 Software only RGBA_4444 Software only RGBX_8888 Software only RGBA_8888 Software only BGRX_8888 Software only BGRA_8888 Software only YUV_420 Software only YUV_420_BIPLANAR Software only UYVY_422 Software only Version Information Data exported 3/11/2016, 4:46:09 PM Chrome version Chrome/49.0.2623.87 Operating system Windows NT 6.1 SP1 Software rendering list version 10.17 Driver bug list version 8.46 ANGLE commit id 83aec70b3d94 2D graphics backend Skia Command Line Args Files (x86)\Google\Chrome\Application\chrome.exe" --flag-switches-begin --flag-switches-end Driver Information Initialization time 114 In-process GPU false Sandboxed false GPU0 VENDOR = 0x8086, DEVICE= 0x2a42 Optimus false AMD switchable false Desktop compositing Aero Glass Driver vendor Intel Corporation Driver version 8.15.10.2869 Driver date 10-4-2012 Pixel shader version 3.0 Vertex shader version 3.0 Max. MSAA samples 1 Machine model name Machine model version GL_VENDOR Google Inc. GL_RENDERER ANGLE (Mobile Intel(R) 4 Series Express Chipset Family Direct3D9Ex vs_3_0 ps_3_0) GL_VERSION OpenGL ES 2.0 (ANGLE 2.1.0.83aec70b3d94) GL_EXTENSIONS GL_OES_element_index_uint GL_OES_packed_depth_stencil GL_OES_get_program_binary GL_OES_rgb8_rgba8 GL_EXT_texture_format_BGRA8888 GL_EXT_read_format_bgra GL_EXT_color_buffer_half_float GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_OES_texture_float GL_EXT_texture_compression_dxt1 GL_ANGLE_texture_compression_dxt3 GL_ANGLE_texture_compression_dxt5 GL_ANGLE_depth_texture GL_OES_depth32 GL_EXT_texture_storage GL_OES_texture_npot GL_EXT_texture_filter_anisotropic GL_EXT_occlusion_query_boolean GL_NV_fence GL_EXT_robustness GL_EXT_blend_minmax GL_ANGLE_framebuffer_blit GL_ANGLE_framebuffer_multisample GL_ANGLE_instanced_arrays GL_ANGLE_pack_reverse_row_order GL_OES_standard_derivatives GL_EXT_shader_texture_lod GL_EXT_frag_depth GL_ANGLE_texture_usage GL_ANGLE_translated_shader_source GL_EXT_debug_marker GL_OES_EGL_image GL_EXT_unpack_subimage GL_NV_pack_subimage GL_OES_vertex_array_object GL_KHR_debug Disabled Extensions Window system binding vendor Google Inc. (adapter LUID: 00000000000084a8) Window system binding version 1.4 (ANGLE 2.1.0.83aec70b3d94) Window system binding extensions EGL_EXT_create_context_robustness EGL_ANGLE_d3d_share_handle_client_buffer EGL_ANGLE_surface_d3d_texture_2d_share_handle EGL_ANGLE_query_surface_pointer EGL_ANGLE_window_fixed_size EGL_NV_post_sub_buffer EGL_KHR_create_context EGL_EXT_device_query EGL_KHR_image EGL_KHR_image_base EGL_KHR_gl_texture_2D_image EGL_KHR_gl_renderbuffer_image EGL_KHR_get_all_proc_addresses EGL_ANGLE_flexible_surface_compatibility Direct rendering Yes Reset notification strategy 0x8252 GPU process crash count 0 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 10 dwHeight 768 dwRefreshRate 60 dwWHQLLevel 0 dwWidth 1366 iAdapter 0 lDriverSize 6549504 lMiniVddSize 0 szAGPStatusEnglish Enabled szAGPStatusLocalized Habilitado szChipType Mobile Intel(R) 4 Series Express Chipset Family szD3DStatusEnglish Enabled szD3DStatusLocalized Habilitado szDACType Internal szDDIVersionEnglish 10 szDDIVersionLocalized 10 szDDStatusEnglish Enabled szDDStatusLocalized Habilitado szDXVAHDEnglish Supported szDXVAModes ModeMPEG2_A ModeMPEG2_C ModeWMV9_B ModeWMV9_C ModeVC1_B ModeVC1_C szDescription Mobile Intel(R) 4 Series Express Chipset Family szDeviceId 0x2A42 szDeviceIdentifier {D7B78E66-6902-11CF-C678-6838A7C2C535} szDeviceName \\.\DISPLAY1 szDisplayMemoryEnglish 1695 MB szDisplayMemoryLocalized 1695 MB szDisplayModeEnglish 1366 x 768 (32 bit) (60Hz) szDisplayModeLocalized 1366 x 768 (32 bit) (60Hz) szDriverAssemblyVersion 8.15.10.2869 szDriverAttributes Final Retail szDriverDateEnglish 11/14/2012 16:57:06 szDriverDateLocalized 14/11/2012 16:57:06 szDriverLanguageEnglish English szDriverLanguageLocalized Inglés szDriverModelEnglish WDDM 1.1 szDriverModelLocalized WDDM 1.1 szDriverName igdumd64.dll,igd10umd64.dll,igdumdx32,igd10umd32 szDriverNodeStrongName oem72.inf:IntelGfx.NTamd64.6.0:iCNT0:8.15.10.2869:pci\ven_8086&dev_2a42 szDriverSignDate szDriverVersion 8.15.0010.2869 szKeyDeviceID Enum\PCI\VEN_8086&DEV_2A42&SUBSYS_18621043&REV_07 szKeyDeviceKey \Registry\Machine\System\CurrentControlSet\Control\Video\{ABA3DA4B-5C8C-4DBB-BF88-6D743DBFF661}\0000 szManufacturer Intel Corporation szMiniVdd no disponible szMiniVddDateEnglish n/a szMiniVddDateLocalized no disponible szMonitorMaxRes szMonitorName Generic PnP Monitor szNotesEnglish No problems found. szNotesLocalized No se encontró ningún problema. szOverlayEnglish Supported szRankOfInstalledDriver 00E62001 szRegHelpText szRevision szRevisionId 0x0007 szSubSysId 0x18621043 szTestResultD3D7English Not run szTestResultD3D7Localized No realizada szTestResultD3D8English Not run szTestResultD3D8Localized No realizada szTestResultD3D9English Not run szTestResultD3D9Localized No realizada szTestResultDDEnglish Not run szTestResultDDLocalized No realizada szVdd no disponible szVendorId 0x8086 Log Messages GpuProcessHostUIShim: The GPU process exited normally. Everything is okay.
,
Mar 14 2016
This website should be using accelerated animations if it wants to animate transform scale. Animating the transform scale with javascript will cause chrome to re-raster a lot which is indeed slower. Not re-rastering makes for blurry correctness problems. services@locoticket.com: Can you explain why this site isn't using accelerated animations to do the animation?
,
Mar 14 2016
,
Mar 14 2016
The site is NOT using javascript to animate the above-mentioned background.
In one of the CSS files you can see the 'intro_bg' animation which makes use of both 'translate' and 'scale' transformations.
If GPU-hardware acceleration is possible, Chrome should use it.
Here below I include the CSS animation that is being used:
@keyframes intro_bg {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
12.5% {
-webkit-transform: scale(1.1) translate(-2.5%,0);
-ms-transform: scale(1.1) translate(-2.5%,0);
transform: scale(1.1) translate(-2.5%,0);
}
25% {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
37.5% {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
50% {
-webkit-transform: scale(1) translate(+0.05%,0);
-ms-transform: scale(1) translate(+0.05%,0);
transform: scale(1) translate(+0.05%,0);
}
62.5% {
-webkit-transform: scale(1.1) translate(0,-2.5%);
-ms-transform: scale(1.1) translate(0,-2.5%);
transform: scale(1.1) translate(0,-2.5%);
}
75% {
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
}
87.5% {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1) translate(0,+0.05%);
-ms-transform: scale(1) translate(0,+0.05%);
transform: scale(1) translate(0,+0.05%);
}
}
@-webkit-keyframes intro_bg {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
12.5% {
-webkit-transform: scale(1.1) translate(-2.5%,0);
-ms-transform: scale(1.1) translate(-2.5%,0);
transform: scale(1.1) translate(-2.5%,0);
}
25% {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
37.5% {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
50% {
-webkit-transform: scale(1) translate(+0.05%,0);
-ms-transform: scale(1) translate(+0.05%,0);
transform: scale(1) translate(+0.05%,0);
}
62.5% {
-webkit-transform: scale(1.1) translate(0,-2.5%);
-ms-transform: scale(1.1) translate(0,-2.5%);
transform: scale(1.1) translate(0,-2.5%);
}
75% {
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
}
87.5% {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1) translate(0,+0.05%);
-ms-transform: scale(1) translate(0,+0.05%);
transform: scale(1) translate(0,+0.05%);
}
}
.anim_intro_bg {
overflow:hidden;
-webkit-animation-duration: 40s;
animation-duration: 40s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: intro_bg;
animation-name: intro_bg;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
,
Mar 14 2016
services@locoticket.com, thanks for reporting this! Unfortunately, % in transform animations can't be run on compositor thread. (See https://bugs.chromium.org/p/chromium/issues/detail?id=389359) However, this is unrelated to the mentioned regression.
,
Mar 15 2016
That explains it then. The CL rasters scale changes to keep things from being blurry. If the animation is not run by the compositor, then it's run by blink and we'll re-raster every frame the scale changes. services@locoticket.com, can your animation be changed so that it runs in the compositor?
,
Mar 15 2016
We could change the animation but that is not the point or am I wrong? The animation was running perfectly fine on Chrome in the past and it is also working fine on other browsers like Firefox. I guess the new way CL rasters scale changes now is not taking the right approach since you get results like the one we are talking about here which are not acceptable visually speaking. What is considered best from a visual point of view: an slightly blurry animation but perfectly fluid, or a less-blurry animation that plays jerky. Since we are talking about motion (animations) the way I see things is that smoothness should have higher priority than sharpness. But that's my view of things and of course is a personal opinion.
,
Mar 15 2016
The animation ran fine but was blurry if you used a scale other than 1. In some use cases maybe that was the right decision, but certainly not in all. By using an accelerated animation, the compositor can tell it is animating, and make smarter decisions about when to raster and what scale to use (instead of either never or always, and we changed from never to always in the blamed CL). Bugs 556533 , 413636 , 368201 , and 542166 are some examples where scale=1 was not the correct choice and re-rastering to not be blurry provides a better experience.
,
Mar 23 2016
It looks like the jerkiness is coming from the background-image property. If you remove the 1x1 background-image on the animating img, or all of the elements, it animates smoothly. Duping this into another bug we have open on jerky animations caused by background-image. |
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 by rnimmagadda@chromium.org
, Mar 14 2016Components: Blink>Animation
Labels: -Type-Compat M-50 OS-Linux OS-Mac Type-Bug-Regression
Owner: danakj@chromium.org
Status: Assigned (was: Unconfirmed)