A position fixed inside a parent that has a -webkit perspective

Question

I am implementing a 3D interface using the jQuery isotope and infinite scroll. Downloading a message for infinite scrolling should be position: fixed . However, since its parent has the -webkit-perspective , it seems to return to absolute positioning.

Is this a known bug, or is it just typical of how 3D transformations affect their children?

Answer 1

Each time you apply a transform to an element, it becomes the positioning root for positioned child elements. Your position:fixed element will become fixed relative to the transformed parent.

This is implemented in the current Webkit and Gecko (at least they've two Ive been convenient for testing) and are described in detail in section 6 of the Transforms specification: https://www.w3.org/TR/css-transforms-1/#transform- property