phx-viewport not triggering at certain browser zoom thresholds

[Albert481]

Environment

• Elixir version (elixir -v): 1.14.4
• Phoenix version (mix deps): 1.7.2
• Phoenix LiveView version (mix deps): 7581dcd main branch
• Operating system: Archlinux
• Browsers you attempted to reproduce this bug on (the more the merrier): Firefox, GNOME Web
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes

Actual behavior

phx-viewport-bottom does not trigger on varying browser zoom levels. For the stream based components I built it was 110%- 120% sometimes and 260% on others. Any zoom range below or after a certain threshold will result in expected behavior.

Expected behavior

phx-viewport-bottom triggering and subsequently calling stream_insert to add more data via phx-update=stream.

[Albert481]

phx-viewport binding does not fire as well, after live navigate (to load more items via stream_insert). Tested with other bindings - phx-click and works fine as expected.

[chrismccord]

I fixed the issues with live navigation but I cannot recreate the zoom issues in firefox. Are you adding padding above and below the container to allow the content to smoothly scroll within the viewport? For example, the following classes can be applied that takes calculates the viewport's height:

    <ul
      id="activity"
      phx-update="stream"
      phx-viewport-top={@page > 1 && "prev-page"}
      phx-viewport-bottom={!@end_of_timeline? && "next-page"}
      class={[
        if(@end_of_timeline?, do: "pb-10", else: "pb-[calc(200vh)]"),
        if(@page == 1, do: "pt-10", else: "pt-[calc(200vh)]")
      ]}
    >
    ...
  </ul> 

Those are tailwind classes, but you can use the calc(200vh) in your css to apply 2x the viewport height padding to the top or bottom of the container. I'm wondering if your zoom level simply changes how the content fits within the viewport, but without a reproduction I can't say for sure. Thanks!

[Albert481]

Thank you! Yes it is the padding.