New issue
Advanced search Search tips

Issue 808009 link

Starred by 1 user

Issue metadata

Status: Available
Owner: ----
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

Can't 2D translate absolutely positioned element in animating parent in multi-column layout

Reported by james.hu...@starlingbank.com, Feb 1 2018

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

Steps to reproduce the problem:
1. Create a multi-column layout (IE column-size: 2)
2. Add an animating element into that layout
3. Absolutely position another element relative to the animating element
4. Apply a 2D translation to the absolutely positioned element (transform: translate/translateX/translateY)

What is the expected behavior?
Translation should be applied as you'd expect

What went wrong?
The translated element was not rendered

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 63.0.3239.132  Channel: stable
OS Version: OS X 10.12.6
Flash Version: 

- Works if you comment out the animation or the translation.
- Works with translate3d/translateZ.
- Works in a standard flow layout
- Works in Safari/Firefox on Mac.
 
index.html
3.6 KB View Download
Labels: Needs-Triage-M63
Components: -Blink>CSS Blink>Animation
Status: Untriaged (was: Unconfirmed)
Reproduces at tip of tree yesterday.

Adding will-change:transform to the loading::after style also causes the behavior to correct itself.
Status: Available (was: Untriaged)

Sign in to add a comment