Ensure that image masks or absolute position objects are used to calculate the height correctly in prototype mode

I met recently an issue with the calculation of a footer height in prototype mode. In order to replicate this:

  • Build a standard footer
  • Place as an overlay, above it, in absolute position, an object that is higher than the footer itself
  • Ensure that a mask hides all object parts that are going beyond the dimensions of your footer.
  • Insert this footer in a very long page and reduce the viewable limits to the device window size.
  • Play the prototype.

When playing your prototypes, the object in absolute position will disturb Figma: it won’t be able to restore the positions of your objects and it will create huge margins on top and bottom when scrolling. It can be very annoying if you want to use SVG decoration symbols/patterns on backgrounds per example, as you will be forced to use plain image backgrounds instead.

Thanks for your sharing your input and knowledge!