Closed Bug 786943 Opened 12 years ago Closed 12 years ago

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

Categories

(Core :: CSS Parsing and Computation, defect)

Product:
Core
Component:
CSS Parsing and Computation
Version:
15 Branch
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: alan, Unassigned)

Details

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.
Component: Untriaged → Style System (CSS)
Product: Firefox → Core
Confirmed on:
Mozilla/5.0 (X11; Linux x86_64; rv:18.0) Gecko/18.0 Firefox/18.0 (20120904030512)
OS: Windows 7 → All
Hardware: x86_64 → All
Status: UNCONFIRMED → NEW
Ever confirmed: true
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 -->
You're setting the background shorthand.  That resets background-size to the initial value if you don't specify it in the shorthand.
Status: NEW → RESOLVED
Closed: 12 years ago
Resolution: --- → INVALID
I know that now Boris. All the properties for 'background' were being reset to auto. Thank you for making it invalid.
You need to log in before you can comment on or make changes to this bug.