2

I have an issue where a fixed element would be positioned by the container with transform:translate3d(0, 0, 0) property, but not by the device screen.

The main issue is that I can't change properties for parent element which has a translate3d transform.

We development video player which will be pasted into different sites. We use position: fixed for full screen on the devices where fullscreen is not supported.

I have attached a JSFiddle with an example where I would have expected the green box to be at the top corner of the 'container' rather than inside of the 'transformWrap' element: http://jsfiddle.net/GMX5H/159/

Simplified version of the fiddle:

<div class="container">
    <div class="transformWrap" style="transform:translate3d(20px, 20px , 20px);">
        <div class="fixed" style="position: fixed;left:0;top:0;">Fixed block</div>
    </div>
</div>

I have read the question which was asked 5 years ago and tried all solutions. Unfortunately, these solutions don't help me, because I don't have access to the parent HTML/CSS and can't get the value of transform.

'transform3d' not working with position: fixed children

Do we have a new possibility to fix this issue?

A. Sokoltsov
  • 21
  • 2
  • 1
    Not without repositioning the element in the DOM so that it lies outside of the transformed container. – Gabriele Petrioli Dec 19 '18 at 13:33
  • Depending on the requirements, though, there might be tricks to work around this limitation. For example you mention that it is to be used when fullscreen is not available. So if you were to show the `.fixed` in fullscreen you could add a class at that time to the `body` or the `transformWrap` element that would unset the `transform` so the fixed position would work. And once you remove the class it would revert back to normal. – Gabriele Petrioli Dec 19 '18 at 13:43
  • you can still do nothing ... the question you found is still applicable and your only way is to remove transform – Temani Afif Dec 19 '18 at 13:43
  • Can we at least determine if transform3d is applied to parent of the specific element? – Alexander Gerasimov Dec 19 '18 at 13:44
  • @TemaniAfif, this question does not have answer, unfortunately. Please reopen to get more ways for possible workarounds. – Alexander Gerasimov Dec 19 '18 at 14:41
  • @AlexanderGerasimov if there is any workaround it should belong to other question. The question is an exact duplicate and all the needed answer are already on the target. If someone find a workaround or a solution he should post it on the other question – Temani Afif Dec 19 '18 at 14:43

0 Answers0