New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 662030 link

Starred by 8 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug


Show other hotlists

Hotlists containing this issue:
Hotlist-1


Sign in to add a comment

Slow hit test on large number of block elements

Reported by insensi...@gmail.com, Nov 3 2016

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36

Steps to reproduce the problem:
1. Go to https://jsfiddle.net/58k80jth/
2. When page is ready, open Developer Tools -> Timeline
3. Click 'Record' button in Timeline
4. Move mouse during 3-5 seconds on JsFiddle result area with red squares
5. Click 'Stop' in Developer Tools
6. You will see that timeline is filled with 'Hit test' events, although events are not needed and there are no subscription to browser events
(You can also look at the attached screen shot 'hit_test_timeline.png') 

What is the expected behavior?
I expected to see clear timeline in this case

What went wrong?
Timeline is filled with 'Hit Test' events. I tried setting 'pointer-events: none' to created elements and/or document.body - this does not help. Also I noticed that:
- hit test time increases if I increase number of elements in provided fiddle
- hit test time reduces in 6-8 times if I not set 'position: absolute' on created elements

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 54.0.2840.71  Channel: n/a
OS Version: 10.0
Flash Version: Shockwave Flash 23.0 r0

There are no visual results in the provided fiddle for simplicity. But this issue cause performance issues, if developer tries, for example, create a graphical demo with large number of block elements and animate just a single element without any mouse interactions
 
Cc: hdodda@chromium.org
Labels: Needs-Feedback
Tested on Windows 10 using chrome M54 #54.0.2840.87 and didn't observe any hit test events in timeline. Followed the steps given in comment #0 .

Attached screenshot for reference.

Could you please provide us the screenshot of the hit test events, as you haven't attached any in comment #0.

Thanks!

662030.png
437 KB View Download
I just attached a screenshot mentioned in the issue description. To see 'Hit test' events in the timeline you might have to 'zoom in' timeline by mouse wheel as additional step to reproduce.

Actually, you screenshot also shows this issue. In a pie chart in the screenshot you provided we can see that most of the time browser spent on 'Rendering' step. 'Hit testing' is also categorized by Chrome as 'Rendering' so we see the same issue on your screenshot.

Can you please re-check to classify this issue?
hit_test_timeline.png
53.5 KB View Download
Cc: sureshkumari@chromium.org
Labels: -Type-Bug -Pri-2 -Needs-Feedback hasbisect-per-revision M-56 Pri-1 Type-Bug-Regression
Owner: sergeyv@chromium.org
Status: Assigned (was: Unconfirmed)

Able to reproduce the issue on windows-7 using chrome stable version 54.0.2840.87 and  canary 56.0.2910.0

This is regression issue broken in M50.Please find the bisect information as below
Narrow Bisect::
===============
Good ::50.0.2625.0   --   (build revision 370090)
Bad:: 50.0.2626.0 --   (build revision 370259)

ChangeLog: 
================
https://chromium.googlesource.com/chromium/src/+log/5dc7e9437e00c35c6fa2d30f365824b8f96b778b..883acd6a5e0d3effbd7420926ee4f592e4525bf8



Possible suspect
==================
f9fc6aeef30d310d1f03818ff187add0f60d32eb	


Review URL: https://codereview.chromium.org/1592973002


sergeyv@ could you please look into this issue if it is related to your change,else please help us in finding the appropriate owner for this issue.

Thanks,



Just for your information: today I just downloaded Chrome 50.0.2624.0(which is older than shown in previous comment) and the problem already there - please look at the attached screen shot. Maybe this issue is non-regression or appeared much earlier?
chrome_50.0.2624.0.png
198 KB View Download
Cc: rbasuvula@chromium.org
Still able to reproduce the issue on Win 10.0 using latest chrome version 57.0.2926.0.

sergeyv@ Could you please look into this issue.

Thanks!
Owner: alph@chromium.org
Alph, could you please take a look?

Comment 7 by alph@chromium.org, Dec 6 2016

Components: Blink>HitTesting
Owner: ----
Status: Available (was: Assigned)
Doesn't look like DevTools bug. DevTools just show the truth here.
Labels: -Pri-1 -Type-Bug-Regression Pri-2 Type-Bug
Labels: Needs-Bisect
Owner: schenney@chromium.org
Status: Assigned (was: Available)
Assigning this to myself to see if it's related to 676764, that I am fixing.
Labels: -Needs-Bisect
As per comment #10, removing the Needs-Bisect label.

Thanks...!!
The demo of another use-case where this issue is prevalent: https://jsfiddle.net/bb4ggpaL/1/
I found a solution for the "hit test"-problem which works in the examples given in the initial post and in comment#12.

Step 1)
Add the following css:
html, body{width:100%;height:100%;overflow:hidden;}

Step 2)
Add a wrapper-div and place the huge amount of elements within

Step 3)
Add the following css to the wrapper:
#wrapper{z-index:-1;position:relative;}

You'll no longer encounter any hit-test performance issues in the developer tools on mousemove. However, all elements within the wrapper will become inaccessible to event-listeners (click, touch, mouse).

In cases where you either just need to drag things around (a game-map) or the control is handled by the keyboard alone, that solution will solve the problem entirely, as the you can still attach event-listeners for the mouse and keyboard to the document instead.

Oh, and here is a demonstration of the solution:

Original: https://jsfiddle.net/58k80jth/
Solved: https://jsfiddle.net/7k2ndbos/
Thanks, Kenny! I will try to check this solution in our project to see if it solves our problem. However, this issue still seems to be relevant since your proposed solution solves the problem only for specific case.

Sign in to add a comment