1490168 - Pie chart hover effect is broken at hsreplay.net

Status: RESOLVED DUPLICATE of bug 878346

(Core :: SVG, defect, P3)

Description

[Karl Dubost💡 :karlcow]

This is probably a performance issue related to async operations or something related. Spin off of https://webcompat.com/issues/18666


0. With Firefox Nightly  (fresh profile)
1. Go to https://hsreplay.net/decks/dV5kdOT3871cjM8nvkeUJ/#tab=overview
2. Hover on the pie charts on the right side

Actual:
nothing move or sometimes move with delay. CPU goes high. Opening the devtools kill everything.

Expected:
The pie chart slice which is being hovered is made more visible (as it does in Chrome)


It relies heavily on React too.
Adding [qf] for performance issue.

Comment 1

[Daniel Holbert [:dholbert]]

CPU usage is high in Chrome when hovering, too.  So, there's not obviously any differential perf issue on our end.  Hence, [qf-].

I do see the rendering glitches (wedges flying in and out, or sometimes not changing at all), though they don't seem to have any connection to / dependence on CPU usage.  Also: Safari 11.1 seems to have the same rendering glitches.

Edge/Chrome seem to agree (they show expected behavior - a subtle grow effect on the hovered pie wedge).

Given that Safari agrees with us, this might not be a Firefox bug -- hard to say up-front.  But if it is a firefox bug, I'd guess it's in Layers or Web Painting components.  Anyway, next step here would be for someone to try to make a reduced testcase.

Comment 2

[Daniel Holbert [:dholbert]]

Ah, they're using a CSS transition to try to transition from the base "transform" *attribute* to a :hover-triggered transform *property*.

So I think this is basically bug 878346.

Comment 3

[Daniel Holbert [:dholbert]]

(more specifically, this is like bug 1435443 , which was also trying to use CSS Transitions on the transform attribute vs. property.)