a9ac4f3282
To create a stacking context for animations on transform:none segment,
we need to set NS_FRAME_MAY_BE_TRANSFORMED. The fix is comming in part 2.
Note that in case of animations which has properties preventing running on
the compositor, e.g., width or height, corresponding layer is not created
at all, but even in such cases, we normally set valid change hint for such
animations in each tick, i.e. restyles in each tick. For example:
div.animate([{ opacity: 1, width: '100px' }, { opacity: 0, width: '200px' }], 1000);
This animation causes restyles in every ticks without this patch, this patch
does not affect such animations at all. The only animations which will be
affected by this patch are animations which has opacity/transform but
did not have those properies. e.g, setting transform by setKeyframes or
changing target element from other target which prevents running on the
compositor, etc.
MozReview-Commit-ID: 78fYqyX8uDX
29 lines
654 B
HTML
29 lines
654 B
HTML
<!DOCTYPE html>
|
|
<html class="reftest-wait reftest-no-flush">
|
|
<title>Changing keyframes to opacity frames creates a stacking context</title>
|
|
<style>
|
|
span {
|
|
height: 100px;
|
|
width: 100px;
|
|
position: fixed;
|
|
background: green;
|
|
top: 50px;
|
|
}
|
|
#test {
|
|
width: 100px; height: 100px;
|
|
background: blue;
|
|
}
|
|
</style>
|
|
<span></span>
|
|
<div id="test"></div>
|
|
<script>
|
|
var anim = document.getElementById("test")
|
|
.animate({ }, { duration: 100000 });
|
|
anim.ready.then(function() {
|
|
anim.effect.setKeyframes({ opacity: [1, 1] });
|
|
requestAnimationFrame(function() {
|
|
document.documentElement.classList.remove("reftest-wait");
|
|
});
|
|
});
|
|
</script>
|