182436 2018-02-02 08:31:57 -0800 animation-play-state: paused causes very high cpu load because of style invalidation loop 2018-05-15 02:00:00 -0700 1 1 1 Unclassified WebKit Animations Safari Technology Preview All All RESOLVED FIXED InRadar P2 Normal --- 1 steffen webkit-unassigned commit-queue dino dstockwell ews-watchlist graouts jonlee koivisto simon.fraser webkit-bug-importer oldest_to_newest 1395865 0 steffen 2018-02-02 08:31:57 -0800 Hello everyone, when using animation-play-state: paused on an animated element and using a transition on a parent element, Safari, Safari TP and WebKit Nightly are suddenly recalculating styles all the time, causing a high cpu load. Opening the Web Inspector causes an even higher CPU load (using WebKit Nightly): https://files.steffend.me/public/webkitbug/webkit-style-invalidation.html Try to open the page in Safari and hover over the card. Then open the Web Inspector. The same is happening in MobileSafari on iOS 11.2(.x), causing the battery to drain fast. Next, try opening: https://files.steffend.me/public/webkitbug/webkit-style-invalidation-playing.html There, the issue doesn't happen, as the animation is not paused (also no high cpu usage in the Web Inspector). 1396103 1 webkit-bug-importer 2018-02-02 21:25:05 -0800 <rdar://problem/37182562> 1423661 2 340325 koivisto 2018-05-14 10:01:48 -0700 Created attachment 340325 patch 1423969 3 340325 commit-queue 2018-05-15 01:59:58 -0700 Comment on attachment 340325 patch Clearing flags on attachment: 340325 Committed r231794: <https://trac.webkit.org/changeset/231794> 1423970 4 commit-queue 2018-05-15 02:00:00 -0700 All reviewed patches have been landed. Closing bug. 340325 2018-05-14 10:01:48 -0700 2018-05-15 01:59:58 -0700 patch animation-paused-style-resolution-loop.patch text/plain 5419 koivisto SW5kZXg6IFNvdXJjZS9XZWJDb3JlL0NoYW5nZUxvZwo9PT09PT09PT09PT09PT09PT09PT09PT09 PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09Ci0tLSBTb3VyY2UvV2Vi Q29yZS9DaGFuZ2VMb2cJKHJldmlzaW9uIDIzMTc1OSkKKysrIFNvdXJjZS9XZWJDb3JlL0NoYW5n ZUxvZwkod29ya2luZyBjb3B5KQpAQCAtMSwzICsxLDI0IEBACisyMDE4LTA1LTE0ICBBbnR0aSBL b2l2aXN0byAgPGFudHRpQGFwcGxlLmNvbT4KKworICAgICAgICBhbmltYXRpb24tcGxheS1zdGF0 ZTogcGF1c2VkIGNhdXNlcyB2ZXJ5IGhpZ2ggY3B1IGxvYWQgYmVjYXVzZSBvZiBzdHlsZSBpbnZh bGlkYXRpb24gbG9vcAorICAgICAgICBodHRwczovL2J1Z3Mud2Via2l0Lm9yZy9zaG93X2J1Zy5j Z2k/aWQ9MTgyNDM2CisgICAgICAgIDxyZGFyOi8vcHJvYmxlbS8zNzE4MjU2Mj4KKworICAgICAg ICBSZXZpZXdlZCBieSBOT0JPRFkgKE9PUFMhKS4KKworICAgICAgICBUZXN0OiBhbmltYXRpb25z L2FuaW1hdGlvbi1wbGF5c3RhdGUtcGF1c2VkLXN0eWxlLXJlc29sdXRpb24uaHRtbAorCisgICAg ICAgIElmIHRoZSBzdHlsZSBvZiBhbiBlbGVtZW50IHdpdGggJ2FuaW1hdGlvbi1wbGF5LXN0YXRl OiBwYXVzZWQnIGlzIHJlY29tcHV0ZWQgc28gaXQgc3RheXMKKyAgICAgICAgcGF1c2VkIHdlIHdv dWxkIGVudGVyIHplcm8tZHVyYXRpb24gYW5pbWF0aW9uIHRpbWVyIGxvb3AuCisKKyAgICAgICAg KiBwYWdlL2FuaW1hdGlvbi9BbmltYXRpb25CYXNlLmNwcDoKKyAgICAgICAgKFdlYkNvcmU6OkFu aW1hdGlvbkJhc2U6OnVwZGF0ZVN0YXRlTWFjaGluZSk6CisKKyAgICAgICAgRG9uJ3QgbW92ZSB0 byBBbmltYXRpb25TdGF0ZTo6UGF1c2VkV2FpdFJlc3BvbnNlIHVubGVzcyB3ZSBnZXQgQW5pbWF0 aW9uU3RhdGVJbnB1dDo6U3R5bGVBdmFpbGFibGUKKyAgICAgICAgKG1hdGNoaW5nIHRoZSBjb21t ZW50cykuIE90aGVyd2lzZSBqdXN0IHN0YXkgaW4gdGhlIGV4aXN0aW5nIHBhdXNlZCBzdGF0ZS4K KworICAgICAgICBSZW1vdmUgQW5pbWF0aW9uU3RhdGVJbnB1dDo6U3RhcnRBbmltYXRpb24gZnJv bSBhc3NlcnRpb24gYXMgdGhlIGNhc2UgY2FuJ3QgaGFwcGVuLgorCiAyMDE4LTA1LTE0ICBUaGli YXVsdCBTYXVuaWVyICA8dHNhdW5pZXJAaWdhbGlhLmNvbT4KIAogICAgICAgICBbR1N0cmVhbWVy XSBGaXggc3R5bGUgaXNzdWUgaW4gTWVkaWFQbGF5ZXJQcml2YXRlR1N0cmVhbWVyQmFzZQpJbmRl eDogU291cmNlL1dlYkNvcmUvcGFnZS9hbmltYXRpb24vQW5pbWF0aW9uQmFzZS5jcHAKPT09PT09 PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09 PT09PQotLS0gU291cmNlL1dlYkNvcmUvcGFnZS9hbmltYXRpb24vQW5pbWF0aW9uQmFzZS5jcHAJ KHJldmlzaW9uIDIzMTU1MykKKysrIFNvdXJjZS9XZWJDb3JlL3BhZ2UvYW5pbWF0aW9uL0FuaW1h dGlvbkJhc2UuY3BwCSh3b3JraW5nIGNvcHkpCkBAIC0zOTUsNyArMzk1LDcgQEAgdm9pZCBBbmlt YXRpb25CYXNlOjp1cGRhdGVTdGF0ZU1hY2hpbmUoQQogICAgICAgICAgICAgLy8gQW5pbWF0aW9u U3RhdGU6OlBhdXNlZFdhaXRSZXNwb25zZSwgd2UgZG9uJ3QgeWV0IGhhdmUgYSB2YWxpZCBzdGFy dFRpbWUsIHNvIHdlIHNlbmQgMCB0byBzdGFydEFuaW1hdGlvbi4KICAgICAgICAgICAgIC8vIFdo ZW4gdGhlIEFuaW1hdGlvblN0YXRlSW5wdXQ6OlN0YXJ0VGltZVNldCBjb21lcyBpbiBhbmQgd2Ug d2VyZSBpbiBBbmltYXRpb25TdGF0ZTo6UGF1c2VkUnVuLCB3ZSB3aWxsIG5vdGljZQogICAgICAg ICAgICAgLy8gdGhhdCB3ZSBoYXZlIGFscmVhZHkgc2V0IHRoZSBzdGFydFRpbWUgYW5kIHdpbGwg aWdub3JlIGl0LgotICAgICAgICAgICAgQVNTRVJUKGlucHV0ID09IEFuaW1hdGlvblN0YXRlSW5w dXQ6OlBsYXlTdGF0ZVBhdXNlZCB8fCBpbnB1dCA9PSBBbmltYXRpb25TdGF0ZUlucHV0OjpQbGF5 U3RhdGVSdW5uaW5nIHx8IGlucHV0ID09IEFuaW1hdGlvblN0YXRlSW5wdXQ6OlN0YXJ0VGltZVNl dCB8fCBpbnB1dCA9PSBBbmltYXRpb25TdGF0ZUlucHV0OjpTdHlsZUF2YWlsYWJsZSB8fCBpbnB1 dCA9PSBBbmltYXRpb25TdGF0ZUlucHV0OjpTdGFydEFuaW1hdGlvbik7CisgICAgICAgICAgICBB U1NFUlQoaW5wdXQgPT0gQW5pbWF0aW9uU3RhdGVJbnB1dDo6UGxheVN0YXRlUGF1c2VkIHx8IGlu cHV0ID09IEFuaW1hdGlvblN0YXRlSW5wdXQ6OlBsYXlTdGF0ZVJ1bm5pbmcgfHwgaW5wdXQgPT0g QW5pbWF0aW9uU3RhdGVJbnB1dDo6U3RhcnRUaW1lU2V0IHx8IGlucHV0ID09IEFuaW1hdGlvblN0 YXRlSW5wdXQ6OlN0eWxlQXZhaWxhYmxlKTsKICAgICAgICAgICAgIEFTU0VSVChwYXVzZWQoKSk7 CiAKICAgICAgICAgICAgIGlmIChpbnB1dCA9PSBBbmltYXRpb25TdGF0ZUlucHV0OjpQbGF5U3Rh dGVSdW5uaW5nKSB7CkBAIC00NTYsNiArNDU2LDEyIEBAIHZvaWQgQW5pbWF0aW9uQmFzZTo6dXBk YXRlU3RhdGVNYWNoaW5lKEEKICAgICAgICAgICAgIH0KIAogICAgICAgICAgICAgQVNTRVJUKG1f YW5pbWF0aW9uU3RhdGUgPT0gQW5pbWF0aW9uU3RhdGU6OlBhdXNlZE5ldyB8fCBtX2FuaW1hdGlv blN0YXRlID09IEFuaW1hdGlvblN0YXRlOjpQYXVzZWRXYWl0U3R5bGVBdmFpbGFibGUpOworCisg ICAgICAgICAgICBpZiAoaW5wdXQgPT0gQW5pbWF0aW9uU3RhdGVJbnB1dDo6UGxheVN0YXRlUGF1 c2VkKQorICAgICAgICAgICAgICAgIGJyZWFrOworCisgICAgICAgICAgICBBU1NFUlQoaW5wdXQg PT0gQW5pbWF0aW9uU3RhdGVJbnB1dDo6U3R5bGVBdmFpbGFibGUpOworCiAgICAgICAgICAgICAv LyBXZSBhcmUgcGF1c2VkIGJ1dCB3ZSBnb3QgdGhlIGNhbGxiYWNrIHRoYXQgbm90aWZpZXMgdXMg dGhhdCBzdHlsZSBoYXMgYmVlbiB1cGRhdGVkLgogICAgICAgICAgICAgLy8gV2UgbW92ZSB0byB0 aGUgQW5pbWF0aW9uU3RhdGU6OlBhdXNlZFdhaXRSZXNwb25zZSBzdGF0ZQogICAgICAgICAgICAg TE9HKEFuaW1hdGlvbnMsICIlcCBBbmltYXRpb25TdGF0ZSAlcyAtPiBQYXVzZWRXYWl0UmVzcG9u c2UiLCB0aGlzLCBuYW1lRm9yU3RhdGUobV9hbmltYXRpb25TdGF0ZSkpOwpJbmRleDogTGF5b3V0 VGVzdHMvQ2hhbmdlTG9nCj09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09 PT09PT09PT09PT09PT09PT09PT09PT09PT0KLS0tIExheW91dFRlc3RzL0NoYW5nZUxvZwkocmV2 aXNpb24gMjMxNTUzKQorKysgTGF5b3V0VGVzdHMvQ2hhbmdlTG9nCSh3b3JraW5nIGNvcHkpCkBA IC0xLDMgKzEsMTQgQEAKKzIwMTgtMDUtMTQgIEFudHRpIEtvaXZpc3RvICA8YW50dGlAYXBwbGUu Y29tPgorCisgICAgICAgIGFuaW1hdGlvbi1wbGF5LXN0YXRlOiBwYXVzZWQgY2F1c2VzIHZlcnkg aGlnaCBjcHUgbG9hZCBiZWNhdXNlIG9mIHN0eWxlIGludmFsaWRhdGlvbiBsb29wCisgICAgICAg IGh0dHBzOi8vYnVncy53ZWJraXQub3JnL3Nob3dfYnVnLmNnaT9pZD0xODI0MzYKKyAgICAgICAg PHJkYXI6Ly9wcm9ibGVtLzM3MTgyNTYyPgorCisgICAgICAgIFJldmlld2VkIGJ5IE5PQk9EWSAo T09QUyEpLgorCisgICAgICAgICogYW5pbWF0aW9ucy9hbmltYXRpb24tcGxheXN0YXRlLXBhdXNl ZC1zdHlsZS1yZXNvbHV0aW9uLWV4cGVjdGVkLnR4dDogQWRkZWQuCisgICAgICAgICogYW5pbWF0 aW9ucy9hbmltYXRpb24tcGxheXN0YXRlLXBhdXNlZC1zdHlsZS1yZXNvbHV0aW9uLmh0bWw6IEFk ZGVkLgorCiAyMDE4LTA1LTA5ICBEb21pbmlrIEluZnVlaHIgIDxkaW5mdWVockBpZ2FsaWEuY29t PgogCiAgICAgICAgIFtBUk1dIERpc2FibGUgdGVzdCBvbiBMaW51eCBkdWUgdG8gbGFjayBvZiBl eGVjdXRhYmxlIG1lbW9yeQpJbmRleDogTGF5b3V0VGVzdHMvYW5pbWF0aW9ucy9hbmltYXRpb24t cGxheXN0YXRlLXBhdXNlZC1zdHlsZS1yZXNvbHV0aW9uLWV4cGVjdGVkLnR4dAo9PT09PT09PT09 PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09 Ci0tLSBMYXlvdXRUZXN0cy9hbmltYXRpb25zL2FuaW1hdGlvbi1wbGF5c3RhdGUtcGF1c2VkLXN0 eWxlLXJlc29sdXRpb24tZXhwZWN0ZWQudHh0CShub25leGlzdGVudCkKKysrIExheW91dFRlc3Rz L2FuaW1hdGlvbnMvYW5pbWF0aW9uLXBsYXlzdGF0ZS1wYXVzZWQtc3R5bGUtcmVzb2x1dGlvbi1l eHBlY3RlZC50eHQJKHdvcmtpbmcgY29weSkKQEAgLTAsMCArMSwyIEBACitQYXVzZWQgYW5pbWF0 aW9uCitzdHlsZSByZWNhbGMgY291bnQ6IDEKSW5kZXg6IExheW91dFRlc3RzL2FuaW1hdGlvbnMv YW5pbWF0aW9uLXBsYXlzdGF0ZS1wYXVzZWQtc3R5bGUtcmVzb2x1dGlvbi5odG1sCj09PT09PT09 PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09 PT0KLS0tIExheW91dFRlc3RzL2FuaW1hdGlvbnMvYW5pbWF0aW9uLXBsYXlzdGF0ZS1wYXVzZWQt c3R5bGUtcmVzb2x1dGlvbi5odG1sCShub25leGlzdGVudCkKKysrIExheW91dFRlc3RzL2FuaW1h dGlvbnMvYW5pbWF0aW9uLXBsYXlzdGF0ZS1wYXVzZWQtc3R5bGUtcmVzb2x1dGlvbi5odG1sCSh3 b3JraW5nIGNvcHkpCkBAIC0wLDAgKzEsMzcgQEAKKzxzY3JpcHQ+CitpZiAod2luZG93LnRlc3RS dW5uZXIpIHsKKyAgICB0ZXN0UnVubmVyLmR1bXBBc1RleHQoKTsKKyAgICB0ZXN0UnVubmVyLndh aXRVbnRpbERvbmUoKTsKK30KKzwvc2NyaXB0PgorPHN0eWxlPgorLmFuaW0geworICAgIGFuaW1h dGlvbi1kdXJhdGlvbjogMjBzOworICAgIGFuaW1hdGlvbi1uYW1lOiBzbGlkZWluOworICAgIGFu aW1hdGlvbi1wbGF5LXN0YXRlOiBwYXVzZWQ7Cit9CitAa2V5ZnJhbWVzIHNsaWRlaW4geworICAg IGZyb20geyBtYXJnaW4tbGVmdDogNTAlOyB3aWR0aDogMzAwJTsgfQorICAgIHRvIHsgbWFyZ2lu LWxlZnQ6IDAlOyB3aWR0aDogMTAwJTsgfQorfQorPC9zdHlsZT4KKzxkaXYgY2xhc3M9YW5pbT4K K1BhdXNlZCBhbmltYXRpb24KKzwvZGl2PgorPGRpdiBpZD1sb2c+PC9kaXY+Cis8c2NyaXB0Pgor ZG9jdW1lbnQuYm9keS5vZmZzZXRMZWZ0OworaWYgKHdpbmRvdy50ZXN0UnVubmVyKSB7CisgICAg aW50ZXJuYWxzLnN0YXJ0VHJhY2tpbmdTdHlsZVJlY2FsY3MoKTsKKyAgICBzZXRUaW1lb3V0KCgp ID0+IHsKKyAgICAgICAgZG9jdW1lbnQuYm9keS5vZmZzZXRMZWZ0OworICAgICAgICBsb2cuaW5u ZXJIVE1MID0gInN0eWxlIHJlY2FsYyBjb3VudDogIiArIGludGVybmFscy5zdHlsZVJlY2FsY0Nv dW50KCk7CisgICAgICAgIHRlc3RSdW5uZXIubm90aWZ5RG9uZSgpOworICAgIH0sIDUwKTsKK30K Kzwvc2NyaXB0PgorPHN0eWxlPgorLmFuaW0geworICAgIGNvbG9yOiBncmVlbjsKK30KKzwvc3R5 bGU+Cg==