Switch from min-height to translate? about pulltorefresh.js

[faelsoto]

That's an interesting approach, we might have to test that.

However there might be a couple issues with it:

1. I'm not sure translate would clip correctly the instructions, as the calculated height would be the same.
2. It would move the body, but not resize it. This might bring additional issues.

We initially went with a position: absolute element, growing its height and adding padding to the mainElement. It seemed hacky and not very elegant. @pateketrueke rewrote it so its height would push down the content, and we're using min-height because in some instances, if you're using flexbox, the height would not be taken into account. It was weird.

Maybe through the API we can allow the use case when you need to calculate both element's position/height? Or maybe we could try with will-change?

[kazzkiq]

I'm not sure, but as far as I know, will-change property only works optimizing properties that already use GPU acceleration. This means that it would have little to no effect to properties such as min-height.

I think the best approach (which would probably lead to structure break and maybe should be focused for further major versions) would be to wrap the whole app body into an element, and use translate3d on both the refresh bar and this element wrapper.

Something like:

<div id="refresh-bar"></div>
<div class="body-wrapper">
  <!-- the page content -->
</div>

Then the styles would be applied as follow (according to touch-move):

<div id="refresh-bar" style="transform: translate3d(0, 35.6665px, 0)"></div>
<div class="body-wrapper" style="transform: translate3d(0, 35.6665px, 0)">>
  <!-- the page content -->
</div>

This would enable pushing the whole page content bellow, but making use of translate3d() GPU-enabled property.

[faelsoto]

The thing with modifying the markup is precisely the counter-point of this proyect: other libraries require changing the structure. And that was a no-no in our use case as it can break a lot of things: from CSS selectors to markup/CSS tricks (like the demo's sticky footer with flexbox).

Adding a to the wrapper would break a lot of thing. Even if it doesn't, moving the main element with translate would overlap with other elements that are not inside the wrapper.

The main focus on this library is making a pull to refresh feature as easy and painless as possible, that's why we went with a new element that pushes down the content, but it doesn't require the dev to rewrite the markup.