Race condition with style recalc |
||||||
Issue descriptionhttps://event-loop-tests.glitch.me/css-anim-from-to.html Clicking the square, or the button, runs the following: ``` box.style.transform = 'translateX(100px)'; requestAnimationFrame(() => { box.style.transition = 'transform 1s ease-in-out'; box.style.transform = 'translateX(50px)'; }); ``` Given that requestAnimationFrame always happens before the next paint, and before regular layout updates, it's expected that the box would move from left to right (since the 100px position would not be calculated). This is how Firefox works. In Chrome, if you click the box, it usually moves from the right to the left. If you click the button, it usually moves from the left to the right. There's some kind of race condition here that probably shouldn't exist.
,
Nov 26
#0 blink::StyleEngine::RecalcStyle (this=0x3aad56d6b018, change=blink::kNoChange) at ../../third_party/blink/renderer/core/css/style_engine.cc:1658 #1 0x00007fffe2335dd1 in blink::Document::UpdateStyle (this=0x197662d86748) at ../../third_party/blink/renderer/core/dom/document.cc:2337 #2 0x00007fffe23318aa in blink::Document::UpdateStyleAndLayoutTree (this=0x197662d86748) at ../../third_party/blink/renderer/core/dom/document.cc:2253 #3 0x00007fffe2337c76 in blink::Document::UpdateStyleAndLayout (this=0x197662d86748) at ../../third_party/blink/renderer/core/dom/document.cc:2470 #4 0x00007fffe2337a83 in blink::Document::UpdateStyleAndLayoutIgnorePendingStylesheets (this=0x197662d86748, run_post_layout_tasks=blink::Document::kRunPostLayoutTasksAsyhnchronously) at ../../third_party/blink/renderer/core/dom/document.cc:2593 #5 0x00007fffe25708fc in blink::(anonymous namespace)::RootEditableElementOfSelection (frameSelection=...) at ../../third_party/blink/renderer/core/editing/ime/input_method_controller.cc:301 #6 0x00007fffe2570bb6 in blink::InputMethodController::TextInputType (this=0x21a1d14a1cd0) at ../../third_party/blink/renderer/core/editing/ime/input_method_controller.cc:1427 #7 0x00007fffe26b7f15 in blink::WebInputMethodControllerImpl::TextInputType (this=0x3aad56d01f48) at ../../third_party/blink/renderer/core/exported/web_input_method_controller_impl.cc:151 #8 0x00007ffff46c21ae in content::RenderWidget::GetTextInputType (this=0xa4fa8540820) at ../../content/renderer/render_widget.cc:2163 #9 0x00007ffff46c16f8 in content::RenderWidget::UpdateTextInputStateInternal (this=0xa4fa8540820, show_virtual_keyboard=true, reply_to_request=false) at ../../content/renderer/render_widget.cc:1215 #10 0x00007ffff46c150c in content::RenderWidget::ShowVirtualKeyboard (this=0xa4fa8540820) at ../../content/renderer/render_widget.cc:1185 #11 0x00007ffff42f52e7 in content::RenderWidgetInputHandler::HandleInputEvent(blink::WebCoalescedInputEvent const&, ui::LatencyInfo const&, base::OnceCallback<void (content::InputEventAckState, ui::LatencyInfo const&, std::__1::unique_ptr<ui::DidOverscrollParams, std::__1::default_delete<ui::DidOverscrollParams> >, base::Optional<cc::TouchAction>)>) (this=0xa4fa8e47020, coalesced_event=..., latency_info=..., callback=...) at ../../content/renderer/input/render_widget_input_handler.cc:453 #12 0x00007ffff46becec in content::RenderWidget::HandleInputEvent(blink::WebCoalescedInputEvent const&, ui::LatencyInfo const&, base::OnceCallback<void (content::InputEventAckState, ui::LatencyInfo const&, std::__1::unique_ptr<ui::DidOverscrollParams, std::__1::default_delete<ui::DidOverscrollParams> >, base::Optional<cc::TouchAction>)>) (this=0xa4fa8540820, input_event=..., latency_info=..., callback=...) at ../../content/renderer/render_widget.cc:867 #13 0x00007ffff42eed43 in content::MainThreadEventQueue::HandleEventOnMainThread(blink::WebCoalescedInputEvent const&, ui::LatencyInfo const&, base::OnceCallback<void (content::InputEventAckState, ui::LatencyInfo const&, std::__1::unique_ptr<ui::DidOverscrollParams, std::__1::default_delete<ui::DidOverscrollParams> >, base::Optional<cc::TouchAction>)>) (this=0xa4fa80f27a0, event=..., latency=..., handled_callback=...) at ../../content/renderer/input/main_thread_event_queue.cc:596 #14 0x00007ffff42ef860 in content::QueuedWebInputEvent::Dispatch (this=0xa4fa8fa6200, queue=0xa4fa80f27a0) at ../../content/renderer/input/main_thread_event_queue.cc:118 #15 0x00007ffff42eeabd in content::MainThreadEventQueue::DispatchRafAlignedInput (this=0xa4fa80f27a0, frame_time=38 days, 5:01:06.910708) at ../../content/renderer/input/main_thread_event_queue.cc:511 #16 0x00007ffff46bf244 in content::RenderWidget::BeginMainFrame (this=0xa4fa8540820, frame_time=38 days, 5:01:06.910708) at ../../content/renderer/render_widget.cc:965 #17 0x00007ffff42c4362 in content::LayerTreeView::BeginMainFrame (this=0xa4fa8ca98e0, args=...) at ../../content/renderer/gpu/layer_tree_view.cc:637 #18 0x00007fffedfa45fd in cc::LayerTreeHost::BeginMainFrame (this=0xa4fa8bc6020, args=...) at ../../cc/trees/layer_tree_host.cc:273 #19 0x00007fffee0b262a in cc::ProxyMain::BeginMainFrame (this=0xa4fa854e380, begin_main_frame_state=...) at ../../cc/trees/proxy_main.cc:208 (More stack frames follow...)
,
Nov 26
The stack trace is from the forced style update in content_shell clicking the green box. The forced update is from handling mouseup in RenderWidgetInputHandler::HandleInputEvent to figure out if it should show a virtual keyboard.
,
Nov 26
,
Nov 26
Hit testing, and accessing the current text input mode/type also force selection which cause layout. It appears this is caused by a hit test after a touch end to determine if the virtual keyboard needs to be shown. I believe the code here: https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/editing/ime/input_method_controller.cc?l=1427&rcl=d72a833dad8deabbf0e49ef16073542142db88a6 could be moved to https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/editing/ime/input_method_controller.cc?l=1472&rcl=d72a833dad8deabbf0e49ef16073542142db88a6 to avoid this issue. nzolghadr@ can you assign someone to investigate?
,
Nov 26
,
Dec 6
Lan, could you take a look at this? |
||||||
►
Sign in to add a comment |
||||||
Comment 1 by pdr@chromium.org
, Nov 26