1260925 - Transition warped / stretched when width greater than 4096 pixel

Status: UNCONFIRMED

(Core :: Layout, defect)

Description

[Felix Buenemann]

Attachment: Archive of test case HTML and GIF animation with screen capture of problem

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:45.0) Gecko/20100101 Firefox/45.0
Build ID: 20160303134406

Steps to reproduce:

If there are two css transition running on top of each other, and the browser window's rendered width is greater than 4096 px, the transitioned content gets stretched and distorted horizontally while the transition runs.

There is a test case and screen capture of the problem in the following Gist:
https://gist.github.com/fe55d1615301b6a572cd80e97101428e

Also attached the html and gif from the gist a a ZIP archive. The test case uses the swiper slider v3.3.1 from http://idangero.us/swiper/. The problem does not occur in Chrome stable/beta/canary or Safari 9.1 on the same system.

The problem can be reproduced at least on Mac OS X 10.11.4 and Firefox 45.0 Beta or Firefox Developer Edition 46.0a2 on a 13" retina MacBook Pro with Iris 6100 graphics connected to a 32" UHD display running at 3200x1800 HiDPI (6400x3600 actual resolution) or 3840x2160 HiDPI (7680x4320 actual resolution). This problem would likely also occur on the 27" retina iMac, which has a native resolution of 5120x2880 displayed at 2560x1440 HiDPI.


Actual results:

While the transition runs, the animated content is stretched horizontally. The wider the window is, the more it becomes stretched.

If the window is resized to less than 4096 px rendered size (2048 px HiDPI), the problem no longer occurs.


Expected results:

The content should not be stretched.

Comment 1

[Felix Buenemann]

Added direct url to test case, it's the same code as the gist and attached zip.

Comment 2

[Loic]

Attachment: ff-swiper-bug.html