Able to reproduce this issue on 66.0.3359.139 using Windows 10 HiDPI machine only. Issue is not seen in Linux, Mac and normal windows machine. i.e; Navigation is not very slow in Chrome when compared to Firefox and Edge. Very little difference is observed.

Issue is seen from M-60. Hence considering this issue as Non-Regression and marking as Untriaged.

This is a big issue for us!! as even on new laptops, the performance is poor in comparison to FF and Edge. It is affecting our business and we need chrome to performance to be on par Edge and FF.

We have tested the performance on multiple machines, on the client and locally. and even with Chrome open with the same link, Edge and FF loads the 3D much better and smoother. Seems that Chrome is using software rendering or doing something crazy in the background.

I hope you can fix this soon as we really need it.

I tested on high DPI chromebook (pixelbook) and high DPI linux machine (P50), and it seems to be working fine. Looks like Windows specific issue indeed.

Not reproducible on a normal-DPI Windows machine; about:gpu attached.

I recall that there's some difference in behavior of GPU rasterization on high-DPI Windows machines. This wouldn't affect the display of the WebGL-rendered canvas but might affect performance of other aspects of the browser.

The parent div with class "page-view" has a CSS transformation matrix of (1, 0, 0, 1, 0, 0) applied to it. Why? I don't know whether the browser detects identity transforms and no-ops them out, but you should try disabling it.

conceptsauce@, please do some more investigation on your side. You're probably running into some corner case in the browser and since we can't easily reproduce this in house you're in a better position to track down exactly what's happening.


Graphics Feature Status
Canvas: Hardware accelerated
CheckerImaging: Disabled
Flash: Hardware accelerated
Flash Stage3D: Hardware accelerated
Flash Stage3D Baseline profile: Hardware accelerated
Compositing: Hardware accelerated
Multiple Raster Threads: Enabled
Native GpuMemoryBuffers: Software only. Hardware acceleration disabled
Rasterization: Hardware accelerated
Surface Synchronization: Enabled
Video Decode: Hardware accelerated
WebGL: Hardware accelerated
WebGL2: Hardware accelerated
Driver Bug Workarounds
clear_uniforms_before_first_program_use
decode_encode_srgb_for_generatemipmap
disable_accelerated_vpx_decode
disable_discard_framebuffer
disable_dxgi_zero_copy_video
disable_framebuffer_cmaa
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
ANGLE crash on glReadPixels from incomplete cube map texture: 518889
Applied Workarounds: force_cube_complete
Framebuffer discarding can hurt performance on non-tilers: 570897
Applied Workarounds: disable_discard_framebuffer
Use GL_INTEL_framebuffer_CMAA on ChromeOS: 535198
Applied Workarounds: disable_framebuffer_cmaa
Disable KHR_blend_equation_advanced until cc shaders are updated: 661715
Applied Workarounds: disable(GL_KHR_blend_equation_advanced), disable(GL_KHR_blend_equation_advanced_coherent)
Decode and Encode before generateMipmap for srgb format textures on Windows: 634519
Applied Workarounds: decode_encode_srgb_for_generatemipmap
Zero-copy DXGI video hangs or displays incorrect colors on AMD drivers: 623029
Applied Workarounds: disable_dxgi_zero_copy_video
VPx decoding isn't supported well before Windows 10 creators update.: 616318, 667532
Applied Workarounds: disable_accelerated_vpx_decode
Don't expose disjoint_timer_query extensions to WebGL: 808744
Native GpuMemoryBuffers have been disabled, either via about:flags or command line.
Disabled Features: native_gpu_memory_buffers
Checker-imaging has been disabled via finch trial or the command line.
Disabled Features: checker_imaging
Version Information
Data exported	2018-05-17T17:43:56.863Z
Chrome version	Chrome/66.0.3359.181
Operating system	Windows NT 10.0.14393
Software rendering list URL	https://chromium.googlesource.com/chromium/src/+/a10b9cedb40738cb152f8148ddab4891df876959/gpu/config/software_rendering_list.json
Driver bug list URL	https://chromium.googlesource.com/chromium/src/+/a10b9cedb40738cb152f8148ddab4891df876959/gpu/config/gpu_driver_bug_list.json
ANGLE commit id	22c768fbda54
2D graphics backend	Skia/66 773868fdade5f9f0e7697e6d09c9bd80aaa9b402-
Command Line	"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --flag-switches-begin --flag-switches-end --isolate-origins=https://chromium.org/,https://corp.googleapis.com/,https://storage.googleapis.com,https://ajax.googleapis.com,https://fonts.googleapis.com,https://googleplex.com/,https://googlesource.com/,https://youtube.com/,https://google.com/,https://googleacquisitionmigration.com/,https://googleusercontent.com/,https://googleprod.com/,https://nest.com/,https://myworkday.com/,https://chromiumapp.org/,https://lucidchart.com/,https://service-now.com/,https://concursolutions.com/,https://salesforce.com/,https://gcorppartners.com/,https://morganstanley.com/,https://schwab.com/,https://qualtrics.com/,https://ultipro.com/,https://google.secure2-enroll.com/,https://googlegroups.com/,https://google.secure.force.com/,https://ebenefitsnow.com/,https://firebase.com/,https://elo.plusrelocation.com/,https://anthem.com/,https://g.viapeople.net/,https://gdjap.com/,https://asana.com/,https://perquisite.net/,https://postini.com/,https://perkhub.com/,https://gstave.us/,https://geolearning.com/,https://lecorpio.com/,https://inverify.net/,https://preceda.com.au/,https://secureacceptance.cybersource.com/,https://solium.com/,https://fgvms.com/,https://ridecell.com/,https://tds.ie/,https://sprinklr.com/,https://smartsheet.com/,https://fieldglass.net/,https://dochub.com/
Driver Information
Initialization time	285
In-process GPU	false
Passthrough Command Decoder	false
Direct Composition	true
Supports overlays	false
Sandboxed	true
GPU0	VENDOR = 0x1002, DEVICE= 0x683d *ACTIVE*
Optimus	false
Optimus	false
AMD switchable	false
Desktop compositing	Aero Glass
Diagonal Monitor Size of \\.\DISPLAY1	29.7"
Driver vendor	Advanced Micro Devices, Inc.
Driver version	22.19.662.4
Driver date	7-20-2017
Pixel shader version	5.0
Vertex shader version	5.0
Max. MSAA samples	8
Machine model name	
Machine model version	
GL_VENDOR	Google Inc.
GL_RENDERER	ANGLE (AMD Radeon R7 200 Series Direct3D11 vs_5_0 ps_5_0)
GL_VERSION	OpenGL ES 2.0 (ANGLE 2.1.0.22c768fbda54)
GL_EXTENSIONS	GL_ANGLE_client_arrays GL_ANGLE_depth_texture GL_ANGLE_framebuffer_blit GL_ANGLE_framebuffer_multisample GL_ANGLE_instanced_arrays GL_ANGLE_lossy_etc_decode GL_ANGLE_pack_reverse_row_order GL_ANGLE_program_cache_control GL_ANGLE_request_extension GL_ANGLE_robust_client_memory GL_ANGLE_texture_compression_dxt3 GL_ANGLE_texture_compression_dxt5 GL_ANGLE_texture_usage GL_ANGLE_translated_shader_source GL_CHROMIUM_bind_generates_resource GL_CHROMIUM_bind_uniform_location GL_CHROMIUM_color_buffer_float_rgb GL_CHROMIUM_color_buffer_float_rgba GL_CHROMIUM_copy_compressed_texture GL_CHROMIUM_copy_texture GL_CHROMIUM_sync_query GL_EXT_blend_minmax GL_EXT_color_buffer_half_float GL_EXT_debug_marker GL_EXT_discard_framebuffer GL_EXT_disjoint_timer_query GL_EXT_draw_buffers GL_EXT_frag_depth GL_EXT_map_buffer_range GL_EXT_occlusion_query_boolean GL_EXT_read_format_bgra GL_EXT_robustness GL_EXT_sRGB GL_EXT_shader_texture_lod GL_EXT_texture_compression_dxt1 GL_EXT_texture_compression_s3tc_srgb GL_EXT_texture_filter_anisotropic GL_EXT_texture_format_BGRA8888 GL_EXT_texture_rg GL_EXT_texture_storage GL_EXT_unpack_subimage GL_KHR_debug GL_NV_EGL_stream_consumer_external GL_NV_fence GL_NV_pack_subimage GL_NV_pixel_buffer_object GL_OES_EGL_image GL_OES_EGL_image_external GL_OES_compressed_ETC1_RGB8_texture GL_OES_depth32 GL_OES_element_index_uint GL_OES_get_program_binary GL_OES_mapbuffer GL_OES_packed_depth_stencil GL_OES_rgb8_rgba8 GL_OES_standard_derivatives GL_OES_surfaceless_context GL_OES_texture_float GL_OES_texture_float_linear GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_OES_texture_npot GL_OES_vertex_array_object
Disabled Extensions	GL_KHR_blend_equation_advanced GL_KHR_blend_equation_advanced_coherent
Disabled WebGL Extensions	EXT_disjoint_timer_query EXT_disjoint_timer_query_webgl2
Window system binding vendor	Google Inc. (adapter LUID: 0000000000014e79)
Window system binding version	1.4 (ANGLE 2.1.0.22c768fbda54)
Window system binding extensions	EGL_EXT_create_context_robustness EGL_ANGLE_d3d_share_handle_client_buffer EGL_ANGLE_d3d_texture_client_buffer EGL_ANGLE_surface_d3d_texture_2d_share_handle EGL_ANGLE_query_surface_pointer EGL_ANGLE_window_fixed_size EGL_ANGLE_keyed_mutex EGL_ANGLE_surface_orientation EGL_ANGLE_direct_composition 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_texture_cubemap_image EGL_KHR_gl_renderbuffer_image EGL_KHR_get_all_proc_addresses EGL_KHR_stream EGL_KHR_stream_consumer_gltexture EGL_NV_stream_consumer_gltexture_yuv EGL_ANGLE_flexible_surface_compatibility EGL_ANGLE_stream_producer_d3d_texture EGL_ANGLE_create_context_webgl_compatibility EGL_CHROMIUM_create_context_bind_generates_resource EGL_CHROMIUM_sync_control EGL_EXT_pixel_format_float EGL_KHR_surfaceless_context EGL_ANGLE_display_texture_share_group EGL_ANGLE_create_context_client_arrays EGL_ANGLE_program_cache_control EGL_ANGLE_robust_resource_initialization
Direct rendering	Yes
Reset notification strategy	0x8252
GPU process crash count	0
Compositor Information
Tile Update Mode	One-copy
Partial Raster	Enabled
GpuMemoryBuffers Status
ATC	Software only
ATCIA	Software only
DXT1	Software only
DXT5	Software only
ETC1	Software only
R_8	Software only
R_16	Software only
RG_88	Software only
BGR_565	Software only
RGBA_4444	Software only
RGBX_8888	GPU_READ, SCANOUT
RGBA_8888	GPU_READ, SCANOUT
BGRX_8888	Software only
BGRX_1010102	Software only
RGBX_1010102	Software only
BGRA_8888	Software only
RGBA_F16	Software only
YVU_420	Software only
YUV_420_BIPLANAR	Software only
UYVY_422	Software only
Display(s) Information
Info	Display[2528732444] bounds=0,0 2560x1600, workarea=0,0 2560x1560, scale=1, external
Color space information	{primaries:BT709, transfer:IEC61966_2_1, matrix:RGB, range:FULL}
Bits per color component	8
Bits per pixel	24
Video Acceleration Information
Decode h264 baseline	up to 1920x1088 pixels
Decode h264 main	up to 1920x1088 pixels
Decode h264 high	up to 1920x1088 pixels
Encode h264 baseline	up to 3840x2176 pixels and/or 30.000 fps
Encode h264 main	up to 3840x2176 pixels and/or 30.000 fps
Encode h264 high	up to 3840x2176 pixels and/or 30.000 fps
Diagnostics
... loading ...
Log Messages
[8140:4928:0517/104246.081:WARNING:angle_platform_impl.cc(59)] : compileToBinary(228): C:\fakepath(65,10-42): warning X3571: pow(f, e) will not work for negative f, use abs(f) or conditionally handle negative values if you expect them C:\fakepath(87,10-42): warning X3571: pow(f, e) will not work for negative f, use abs(f) or conditionally handle negative values if you expect them

I recorded a trace on Lenovo Yoga 710 (see attached), and took a look together with piman@.

Here are a few issues we identified that caused the glittering of your app

1) You did a lot of work outside RAF and they are timer based. This makes it hard for Chrome to optimize scheduling. Please consider putting most of your work under RAF

2) Within a frame we recorded 7000+ draw calls and 10+ clears. This is not good. Chrome is multi-process architecture, so we have to encode each GL command and send it to GPU process through IPC. (Other browsers do not do that, so they don't have this overhead). Please consider consolidate your 7000+ draw calls into limited a few. Then you will see performance in Chrome improve dramatically.

Conclusion: we believe your app isn't applying the best practice of WebGL coding. Please consider optimizing according to the above advice. For the current code, it's very hard for Chrome to optimize for you.

Deleted: trace_tracing.json.gz 5.5 MB

trace_tracing.json.gz 5.5 MB Download

You can also consider using instanced draw calls with WebGL 2.0 or whenever the extension is available in WebGL 1.0 (https://www.khronos.org/registry/webgl/extensions/ANGLE_instanced_arrays/)

It seems you are displaying the same object multiple times, so that is one way to reduce draw calls.

Many thanks all, this is very helpful, I have notified my Dev and he will look over this tomorrow and see how he can feedback/fix the current issue :) 

Thank you very much one again.

Thanks for looking into this more on your end. Let me mark this ExternalDependency to get it off our dashboard.