mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-24 05:11:16 +00:00
685a35fbc5
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
--HG--
extra : rebase_source : c4a6ef244f26f3d808fd2c6a5f80c1a15478ae31
32 lines
711 B
HTML
32 lines
711 B
HTML
<!DOCTYPE html>
|
|
<html class="reftest-wait reftest-no-flush">
|
|
<title>
|
|
Opacity animation creates a stacking context when changing its target
|
|
</title>
|
|
<style>
|
|
span {
|
|
height: 100px;
|
|
width: 100px;
|
|
position: fixed;
|
|
background: green;
|
|
top: 50px;
|
|
}
|
|
div {
|
|
width: 100px; height: 100px;
|
|
background: blue;
|
|
}
|
|
</style>
|
|
<span></span>
|
|
<div id="test"></div>
|
|
<div id="another"></div>
|
|
<script>
|
|
var anim = document.getElementById("test")
|
|
.animate({ opacity: [1, 1] }, { duration: 100000 });
|
|
anim.ready.then(function() {
|
|
anim.effect.target = document.getElementById("another");
|
|
requestAnimationFrame(function() {
|
|
document.documentElement.classList.remove("reftest-wait");
|
|
});
|
|
});
|
|
</script>
|