I've nested turbo frames as follows:
<%= turbo_frame_tag("main_container") do %>
...
<%= turbo_frame_tag("nested_container", src: "/path/to/articles", loading: "lazy") do %>
<%
# Here is the turbo-rendered content that will be eventually loaded
# including links like this:
#
# link_to(
# "Article title",
# "/path/to/article/1",
# :'data-turbo-frame' => "_top"
# )
%>
<% end %>
<% end %>
Turbo frame rendering works as expected.
However, when I click a link_to
then it loads/visits the linked page but doesn't position the view at the beginning/top of that loaded/visited page i.e. the loaded/visited page results scrolled almost to the bottom or, maybe (I cannot verify this), at the same vertical height of the link that triggered the page loading/visit. Even if I set the data-turbo-frame="_top"
on the main_container and nested_container too, link_to
loads/visits the linked page but the rendered page results scrolled.
Note: This strange behaviour seems to happen only in the Firefox browser. Tested in Firefox, Chrome, Safari, and Edge.
Am I missing something? How to make the clicked links in the nested turbo frame to load/visit the linked page without having that page scrolled?