Last Comment Bug 786943 - Using @keyframes animations breaks background-size for backgrounds using element()
: Using @keyframes animations breaks background-size for backgrounds using elem...
Status: RESOLVED INVALID
:
Product: Core
Classification: Components
Component: CSS Parsing and Computation (show other bugs)
: 15 Branch
: All All
: -- normal (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
Mentors:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2012-08-30 00:29 PDT by Alan Gresley
Modified: 2012-09-06 01:47 PDT (History)
3 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments

Description Alan Gresley 2012-08-30 00:29:59 PDT
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:15.0) Gecko/20100101 Firefox/15.0
Build ID: 20120824154833

Steps to reproduce:

Created a demo for testing element() in backgrounds but could not use background-size. http://css-class.com/test/css/3/image/element-water-background-movement1.htm

Here is a demo showing the bug. http://css-class.com/test/bugs/gecko/element-keyfarmes-animation-bug.htm

Using @keyframes animations breaks background-size for backgrounds using element().


Actual results:

background-size didn't work @keyframes animations.


Expected results:

background-size should work with @keyframes animations.
Comment 1 Ioana (away) 2012-09-04 07:11:16 PDT
Confirmed on:
Mozilla/5.0 (X11; Linux x86_64; rv:18.0) Gecko/18.0 Firefox/18.0 (20120904030512)
Comment 2 Alan Gresley 2012-09-04 08:09:17 PDT
Will note that if only some of the background properties (see below CSS with background-position) is animated, it works.

<!doctype html>

<style type="text/css">

div {
  width: 20em;
  border: 10px solid black;
  height: 300px;
  width: 300px;
  margin: 20px;
}

#test { 
  background: -moz-element(#image) 0% 0%, -moz-element(#image) 100%  100%;
  background-size: 100px 100px;
  background-repeat: no-repeat;
  -moz-animation: move 2s infinite linear;
}
@-moz-keyframes move {
	0% { background-position: 0% 0%, 100% 100%; }
	100% { background-position: 100% 100%, 0% 0%; }
}

#image {
  background: -moz-linear-gradient(blue, yellowgreen);
}

</style>

<div id="test"></div><!-- with element() -->

<div id="image"></div><!-- referenced element -->
Comment 3 Boris Zbarsky [:bz] (Out June 25-July 6) 2012-09-04 08:41:11 PDT
You're setting the background shorthand.  That resets background-size to the initial value if you don't specify it in the shorthand.
Comment 4 Alan Gresley 2012-09-06 01:47:25 PDT
I know that now Boris. All the properties for 'background' were being reset to auto. Thank you for making it invalid.

Note You need to log in before you can comment on or make changes to this bug.