Ons-Speed-Dial Fab does not stay at fixed position.

[gobiyau]

I tried the following code, and found that the FAB will move upward when scrolling. I was using
https://unpkg.com/onsenui/css/onsenui.css, https://unpkg.com/onsenui/css/onsen-css-components.min.css, https://unpkg.com/onsenui/js/onsenui.min.js.

<ons-if platform="android">
  <ons-fab>
    ...
  </ons-fab>
</ons-if>

<ons-if platform="ios other">
  <ons-fab>
    ...
  </ons-fab>
</ons-if>

But it is normal when using https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.6/css/onsenui.css, https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.6/css/onsen-css-components.css, https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.6/js/onsenui.js.

Is there a bug in the version 2.10 when using ons-if platform together with ons-fab?

Please found the samples

1 https://codepen.io/gobiyau/pen/KKzgWjq (There’s problem)
2 https://codepen.io/gobiyau/pen/PoNGpvq (it’s OK)

Best Regards,
Gobi

[emccorson]

Thanks for the detailed report.

It looks like this is a bug. I will add it to the GitHub issues.

Until it gets fixed, you can remove ons-if and use this as a workaround:

ons.ready(() => {
  if (!ons.platform.isAndroid()) {
    document.querySelector('ons-fab').style.display = 'none';
  }
});

[emccorson]

I’ve reported it and you can track progress here:
https://github.com/OnsenUI/OnsenUI/issues/2778

emccorson created this issue in OnsenUI/OnsenUI

open Core | Fab issue: Using ons-if to conditionally display ons-fab causes fab to move with page scroll #2778

[gobiyau]

Thanks for your prompt reply, looking forward the upgrade version.