Bug 81946 - [CSS Regions] CSS region not working with css animations and transforms
Summary: [CSS Regions] CSS region not working with css animations and transforms
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC Windows Vista
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks: 57312
  Show dependency treegraph
 
Reported: 2012-03-22 12:08 PDT by Niklas von Hertzen
Modified: 2014-09-24 08:30 PDT (History)
6 users (show)

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
Description Niklas von Hertzen 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.
Comment 1 Niklas von Hertzen 2012-03-22 12:09:27 PDT
Created attachment 133315 [details]
Animating with left instead of transform, working correctly
Comment 2 Niklas von Hertzen 2012-03-22 12:10:16 PDT
Created attachment 133317 [details]
A static transform, working as expected
Comment 3 Niklas von Hertzen 2012-03-22 12:10:37 PDT
Created attachment 133318 [details]
expected result
Comment 4 Niklas von Hertzen 2012-03-22 12:10:57 PDT
Created attachment 133319 [details]
actual result
Comment 5 Alexandru Chiculita 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.
Comment 6 Michelangelo De Simone 2013-06-13 20:41:38 PDT
This seems to repro still on today's nightly (r151543)
Comment 7 Mihnea Ovidenie 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,