Last Comment Bug 786943 - Using @keyframes animations breaks background-size for backgrounds using element()
: Using @keyframes animations breaks background-size for backgrounds using elem...
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
: Jet Villegas (:jet)
Depends on:
  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:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Description User image 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.

Here is a demo showing the bug.

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 User image 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 User image 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);


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

<div id="image"></div><!-- referenced element -->
Comment 3 User image Boris Zbarsky [:bz] (still a bit busy) 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 User image 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.