WebKit Bugzilla
Attachment 358973 Details for
Bug 193343
: Animation and other code is too aggressive about invalidating layer composition
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
Testcase
background-position-animation.html (text/html), 1.17 KB, created by
Simon Fraser (smfr)
on 2019-01-11 18:57:30 PST
(
hide
)
Description:
Testcase
Filename:
MIME Type:
Creator:
Simon Fraser (smfr)
Created:
2019-01-11 18:57:30 PST
Size:
1.17 KB
patch
obsolete
><!DOCTYPE html> ><html> ><head> > <meta charset="utf-8"> > <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> > <title>Background position animation</title> > <style> > .box { > position: relative; > width: 800px; > height: 104px; > animation-duration: 2s; > animation-fill-mode: forwards; > animation-iteration-count: infinite; > animation-name: placeHolderShimmer; > animation-timing-function: linear; > background: linear-gradient(to right,#eee 8%,#ddd 18%,#eee 33%); > background-size: 800px 104px; > visibility: hidden; > } > > @keyframes placeHolderShimmer { > 0% { background-position: -468px 0; } > 100% { background-position: 468px 0; } > } > > .composited { > -webkit-transform: translateZ(0); > } > > </style> > ></head> ><body> > <p>There is a visibility:hidden box with an animated background here:</p> > <div class="box"> > </div> > <div class="name" ontouchstart="(void)0"> > Touch handler here > </div> ></body> ></html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Background position animation</title> <style> .box { position: relative; width: 800px; height: 104px; animation-duration: 2s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: placeHolderShimmer; animation-timing-function: linear; background: linear-gradient(to right,#eee 8%,#ddd 18%,#eee 33%); background-size: 800px 104px; visibility: hidden; } @keyframes placeHolderShimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } .composited { -webkit-transform: translateZ(0); } </style> </head> <body> <p>There is a visibility:hidden box with an animated background here:</p> <div class="box"> </div> <div class="name" ontouchstart="(void)0"> Touch handler here </div> </body> </html>
View Attachment As Raw
Actions:
View
Attachments on
bug 193343
:
358859
|
358865
|
358867
|
358869
|
358870
|
358874
|
358933
|
358970
|
358972
| 358973