[Feature request] Log [Violation] messages when inefficient CSS animation causes Layout/Paint events

[Šime Vidas]

Google’s Sam Saccone has posted a short video [1] that shows how animating the “wrong” CSS properties triggers Layout and Paint events, which can cause jank on the page. Would it make sense and be feasible to log a [Violation] message in such an event? I think, it would help web developers quickly identify inefficient CSS animations on the page.

[1]: https://www.youtube.com/watch?v=Wfxm56ttAmE

[PhistucK]

Violations are already a bit noisy, so I think it should only log things that are obviously broken. Since the amount of websites that change left and such (as an example) is probably pretty huge (most of the legacy web, at least), this can result in very noisy logs.

For really pathological cases, yes, I agree (but that should already happen, I think, there is the "foo caused a long layout operation" violation, there might be one for long paints, I have not checked).

☆PhistucK

On Thu, May 18, 2017 at 10:43 PM, Šime Vidas <sime....@gmail.com> wrote:

Google’s Sam Saccone has posted a short video [1] that shows how animating the “wrong” CSS properties triggers Layout and Paint events, which can cause jank on the page. Would it make sense and be feasible to log a [Violation] message in such an event? I think, it would help web developers quickly identify inefficient CSS animations on the page.

[1]: https://www.youtube.com/watch?v=Wfxm56ttAmE

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/7ea8cf74-9dc3-4cab-9e11-46f5d61393cb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Masataka Yakura]

That sounds like it can be better solved as a DoBetterWeb practice under lighthouse.

https://developers.google.com/web/updates/2016/12/lighthouse-dbw#new_best_practices