Is it possible to break a positioned element out of a parent that has a transform?

Question

Please see this example: http://jsfiddle.net/niaconis/5jgHj/

Using position: fixed works to break box "b" out of its position: relative parent.

Is it possible to do the same for box "d" even though -*-transform is applied to its parent?
If so, how?
If not, why? Are there any work-arounds/polyfills?

For extra clarification, in my real-world use the position: relative element is having transform applied via javascript, so I can't simply remove it. Specifically, it is the element that enacts panning on a Leaflet map.

possible duplicate of [Positions fixed doesn't work when using -webkit-transform](http://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform) — Zach Saucier, Nov 25 '13 at 23:04

score 1 · Accepted Answer · edited May 23 '17 at 10:31

It's a webkit issue reported here for all transforms

A work around from this SO post is to create another means of the transform and apply it in the case of webkit browsers using media queries (the other means depends on what transforms you intend to apply)

@media screen and (-webkit-min-device-pixel-ratio:0) {
     ... webkit version here ...
}

You could do the same thing using a javascript function taken from this SO post to detect the browser and apply the transformation replacement if it's Chrome, Safari, or (in your case) Firefox

// Returns [Browser, Version]
navigator.sayswho = (function(){
  var N= navigator.appName, ua= navigator.userAgent, tem;
  var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
  if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
  M= M? [M[1], M[2]]: [N, navigator.appVersion,'-?'];
  return M;
})();
if(navigator.sayswho[0] == "Chrome" || navigator.sayswho[0] == "Safari") {
    // Do webkit specific fix
}
if(navigator.sayswho[0] == "Firefox") {
    // Do Firefox specific fix here
}

However both of these work arounds involve creating the transform in another way (not using transforms). Most likely you'd have to recreate the same effect using javascript and apply it in these cases, which is far from ideal

I'd recommend working around the issue in another way, most likely by removing position:fixed

Thanks for the quick response. The bug report mentions this works properly in FF/IE/Opera, but I find FF isn't working either. My transform must be dynamic (applied via js). Does a media query work-around apply in this situation? — nickiaconis, Nov 25 '13 at 23:36
@codefox421 Updated my solution with how you'd detect the browser with javascript as opposed to media queries. As for the actual replacement, it depends on which transforms you want to apply because you'll have to recreate the transforms in another way — Zach Saucier, Nov 26 '13 at 00:36
I see. I'm using this with a js mapping system (Leaflet), and I need to keep something that normally pans around with the map in a fixed place on the screen. Therefore, I think it will be easier for me to edit the map's source to use a method other than `transform` for panning than it will be to find a replacement for `position: fixed`. Thanks for your help! — nickiaconis, Nov 26 '13 at 16:44

Is it possible to break a positioned element out of a parent that has a transform?

1 Answers1