RESOLVED WONTFIX 81946
[CSS Regions] CSS region not working with css animations and transforms 
https://bugs.webkit.org/show_bug.cgi?id=81946
Summary [CSS Regions] CSS region not working with css animations and transforms
Niklas von Hertzen
Reported 2012-03-22 12:08:34 PDT
Created attachment 133314 [details] Example where the problem is present - transform: translate in an animation Overview: When animating an element to flow from one element to another with CSS regions, it has drawing issues (it is only partially moving and the results vary a bit depending on webkit version, but not working correctly in either 19.0.1077.0 canary or 17.0.963.83 m). It clips the element in a way it shouldn't and it doesn't transfer the element onto the next region as it should. The problem rises when you animate an element to move from 1 region to another AND at the same time have another element (anywhere on the page???), which animates with transform (tested with translate and scale). If you simply animate it with left/top, it works fine and if you just assign a static transform translate (not animating it), it works fine as well. Steps to Reproduce: Open up notworking.html and watch the animation of the red block Actual Results It clips the red block and doesn't move it to the next region (as displayed in result.jpg) Expected Results: It should overlap green block as well as become partially blue as defined with the @region rule. (as displayed in expected.jpg) In addition, with 19.0.1077.0 canary, if you change to another tab and tab back in, the red block should have successfully been drawn over the green block (as it should), but it isn't partially blue (as it should because of the @region rule). If you however tab out once again and back in, the @region rule should be correctly applied now as well.
Attachments
Example where the problem is present - transform: translate in an animation (2.82 KB, text/html)
2012-03-22 12:08 PDT, Niklas von Hertzen 		no flags
Details
Animating with left instead of transform, working correctly (2.77 KB, text/html)
2012-03-22 12:09 PDT, Niklas von Hertzen 		no flags
Details
A static transform, working as expected (2.42 KB, text/html)
2012-03-22 12:10 PDT, Niklas von Hertzen 		no flags
Details
expected result (8.60 KB, image/jpeg)
2012-03-22 12:10 PDT, Niklas von Hertzen 		no flags
Details
actual result (8.83 KB, image/jpeg)
2012-03-22 12:10 PDT, Niklas von Hertzen 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Niklas von Hertzen
Comment 1 2012-03-22 12:09:27 PDT
Created attachment 133315 [details] Animating with left instead of transform, working correctly
Niklas von Hertzen
Comment 2 2012-03-22 12:10:16 PDT
Created attachment 133317 [details] A static transform, working as expected
Niklas von Hertzen
Comment 3 2012-03-22 12:10:37 PDT
Created attachment 133318 [details] expected result
Niklas von Hertzen
Comment 4 2012-03-22 12:10:57 PDT
Created attachment 133319 [details] actual result
Alexandru Chiculita
Comment 5 2012-03-30 14:06:22 PDT
I think this is related to the fact that transform animations create composited layers and those are not supported yet inside regions. As far as I know multi-columns have the same issue.
Michelangelo De Simone
Comment 6 2013-06-13 20:41:38 PDT
This seems to repro still on today's nightly (r151543)
Mihnea Ovidenie
Comment 7 2014-09-24 08:30:19 PDT
Hi Niklas, Would you mind testing this issue again in Safari 7.1? We did a couple of improvements for regions and accelerated content should behave better when combined with regions. Kind regards,
Brent Fulgham
Comment 8 2022-07-13 09:28:16 PDT
CSS Regions were removed in Bug 174978.
Note You need to log in before you can comment on or make changes to this bug.