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

RESOLVED INVALID

Status

()

Core
CSS Parsing and Computation
RESOLVED INVALID
5 years ago
5 years ago

People

(Reporter: Alan Gresley, Unassigned)

Tracking

15 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

5 years ago
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.

Updated

5 years ago
Component: Untriaged → Style System (CSS)
Product: Firefox → Core

Comment 1

5 years ago
Confirmed on:
Mozilla/5.0 (X11; Linux x86_64; rv:18.0) Gecko/18.0 Firefox/18.0 (20120904030512)

Updated

5 years ago
OS: Windows 7 → All
Hardware: x86_64 → All

Updated

5 years ago
Status: UNCONFIRMED → NEW
Ever confirmed: true
(Reporter)

Comment 2

5 years ago
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
Last Resolved: 5 years ago
Resolution: --- → INVALID
(Reporter)

Comment 4

5 years ago
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.