1277598 - Background image with background-size:cover not sized properly during scale animation on Retina screen

Status: RESOLVED WORKSFORME

(Core :: Widget: Cocoa, defect, P3)

Description

[markccarlson]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36

Steps to reproduce:

OS: Mac OS X 10.10.5 (Yosemite) and OS X 10.11.4 (El Capitan)

http://codepen.io/mcarlson/pen/oLgyza

I can reproduce by following these steps:
1. Create web page with 100% width div.
2. Add large image via background-image css declaration.
3. Set background-size style to cover.
4. Use JavaScript to animate the scale of the div element, either *from* something larger than 100% of the container or *to* something larger than 100% of the containing div. I am using Greensock for the animation. Please see codepen URL included. In this example, the element with the background image is animating from 130% scale to 100% scale for a zoom effect.


Actual results:

During the animation sequence, the background image is no longer sized properly. It spills outside of its containing div. When animation is complete, the background image snaps to the correct size.


Expected results:

Background image should be sized to cover the containing div throughout the animation sequence.

NOTES: 
1. Only repros on Retina screen. On the same Mac but with browser positioned on an external non-Retina (plain 1:1 pixel density) monitor, no repro.
2. Does not repro with background-size:contain
3. Does repro with background-size: 100% 100% as well
4. Does not repro in Chrome or Safari under same conditions
5. Animations that do not involve scaling beyond 100% of the container do not seem to have any problem

Comment 1

[ovidiu boca[:Ovidiu]]

Tested on MacBook Pro Retina OS X 10.11, with FF Nightly 49.0a1(2016-06-06) and I can reproduce it.

Comment 2

[Timothy Nikkel (:tnikkel)]

I tried and couldn't reproduce on OS X on a retina screen. I tried aurora (2017-01-13) and on nightly (2016-06-06). Anything I'm missing in try to reproduce? Is the bug still happening?

Comment 3

[ovidiu boca[:Ovidiu]]

I tested again following the steps from description with FF Nightly (2017-01-24) and I can't reproduce it any more. Tested on MacBook Pro Retina.

Mark please reopen it if you can reproduce the issue with the latest Nighlty.

Comment 4

[markccarlson]

Confirmed. I can no longer reproduce. Verified no repro on FF 51.0.1 on MacBook Pro Retina running OS X Sierra (10.12.3) and also one on OS X El Capitan (10.11.4).


Version: 51.0.1
Build ID: 20170125094131
Update Channel: release
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:51.0) Gecko/20100101 Firefox/51.0
OS: Darwin 16.4.0