[Solved] Absolute Positioning Usage for Button in iOS

[krsyoung]

Hi, I’m seeing an issue where a Button with class absolute-bottom-right is doing some weird things on iOS (when accessed from Safari on iPhone). When the page is scrolled the visible icon doesn’t stay fixed in the bottom right (it moves up the page with the scroll), however the invisible “clickable” button is still down there (if you tap in the bottom right it triggers).

The button definition looks like:

  <button v-if="isEditable === true" class="primary circular absolute-bottom-right" style="right: 18px; bottom: 18px;" @click="edit()">
   <i class="item-secondary">mode_edit</i>
 </button>

Not sure if anybody else has seen anything similar? No issues via desktop.

I also think that the <q-fab> component works properly with the same absolute-bottom-right class, however in my case I just need the one button.

Thanks!

[krsyoung]

So, just a little more information, I think the issue might be related to -webkit-overflow-scrolling: touch; which is defined in the div.layout-view rules. Not sure the ramifications of changing this but going to experiment what happens if I change it to -webkit-overflow-scrolling: auto; for the button.

[rstoenescu]

This is no longer relevant as v0.14 (releasing in a few days) has a completely new Layout and fixed positioning within Layout. Much much easier to set everything up and avoid issues like you have. Stay tuned.

[krsyoung]

Ok thanks @rstoenescu!

Unfortunately in our case we have production clients using the software at v0.13.9 (we’ll need to monkey patch ahead of conversion to v0.14). We look forward to the next version, in the meantime if there are any suggestions on the best way to address (would think somebody else has seen this) ideas would be much appreciated!

[krsyoung]

For anyone else hitting the problem, not great but I just put the following in the <style> tag:

<style>
  /* TODO: this is a hack, fix it! */
  div.layout-view {
    -webkit-overflow-scrolling: auto;
  }
</style>

I still think <q-fab> works, which means the button should work somehow but likely won’t dig into it (rather will wait on the migration to 0.14).

[edudesouza]

Same case here, but only worked this way, in my main css file

@media screen and (-webkit-min-device-pixel-ratio:0) {

div.layout-view {-webkit-overflow-scrolling: auto;}

}