[MdAppContainer] Breaks Floating Action Button's Fixed Positioning

[arranf]

Steps to reproduce

1. Using @beta7
2. Create a md-app with a md-app-content
3. Create a list longer than the viewport with a floating action button which has position: fixed;

Which browser?

Chrome latest, all browsers will be affected though

What is expected?

I would expect the floating action button to scroll with the viewport as it has a fixed position

What is actually happening?

The md-app-container has a class .md-app-container which has transform: translate3D(0,0,0) which causes fixed positions to not work.

Further details here: https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children

Reproduction Link

I can't reproduce on CodePen as for some reason md-app isn't registered properly in the pen but this template will allow you to reproduce locally.

<div id="app" style="height:100vh">
  <md-app>
    <md-app-toolbar class="md-primary">
      <span class="md-title">Fixed is Broken</span>
    </md-app-toolbar>
    <md-app-content>
      <ul>
        <li v-for="i in Array.from({length: 200}, (v, k) => k)">{{i}}</li>
      </ul>

      <md-button class="md-fab md-fab-bottom-right" style="position: fixed;">
        <md-icon>search</md-icon>
      </md-button>
    </md-app-content>
  </md-app>
</div>

[Samuell1]

If its transform removed all works fine? @arranf

[arranf]

@Samuell1 Yes

[Samuell1]

Looks like if transform is removed toolbar with fixed position is broken @arranf

[arranf]

I've experienced that but didn't know it was a side effect of me removing the transform on the content. I don't have a great suggestion for how to fix the two.

…

On 12 January 2018 at 13:12, Samuell ***@***.***> wrote: Looks like if is transform removed toolbar with fixed position is broken @arranf <https://github.com/arranf> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1369 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AITM9tftQ3b4cmkIQNSgd0AjqIBO1ciDks5tJ1o-gaJpZM4RS8vG> .

[Samuell1]

I think for now is best way to move fab out of md-app-content

[jan-johansson-mr]

Hi,

I moved the FAB out of the md-app, and the FAB stays fixed (as I want). However, this is introducing non-modular solution, since I have to wire up EventBus and messages between components that want to use the FAB. The modular solution (I think) is to be able to define whatever FAB or Speed button you want on any component and let the component handle events locally (while the FAB stays fixed on the surface). I see you signaled for help, I'd be happy to chip in, but I am far from the experience needed to fix this issue. I'm yet struggling with basic UI. Sorry.

But thanks!

[jan-johansson-mr]

Hi,

Following https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children from @arranf and then other links from that, it seems that all child elements to any transformed element looses their fixed position to the viewport (if they were designed to be fixed) and becomes attached to the transformed element instead (by design as described by http://www.w3.org/TR/css3-2d-transforms/#transform-rendering).

It means that if a md- components utilizes transformation, then child component gets attached to the transformed element in the md- component (all bets are off when it comes to positioning a child element relative to the viewport). In other words, the FAB component can't be "fixed", if it's placed as a child in a component using transform.

Here is another interesting read about the issue: http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms

I read a number of trial and errors from people that tried to fix this issue, but all failed in some way or another (it's hard to fix an issue that is really an effect by design).