Bug 81946 – [CSS Regions] CSS region not working with css animations and transforms

• Component: CSS
• Status: RESOLVED WONTFIX

[Niklas von Hertzen]

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.

[Niklas von Hertzen]

Created attachment 133315 [details]
Animating with left instead of transform, working correctly

[Niklas von Hertzen]

Created attachment 133317 [details]
A static transform, working as expected

[Niklas von Hertzen]

Created attachment 133318 [details]
expected result

[Niklas von Hertzen]

Created attachment 133319 [details]
actual result

[Alexandru Chiculita]

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]

This seems to repro still on today's nightly (r151543)

[Mihnea Ovidenie]

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]

CSS Regions were removed in Bug 174978.