Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Turbo visit with replace action flashes elements - same-page with query params #53

Open
karlentwistle opened this issue Dec 4, 2024 · 9 comments
Open

Turbo visit with replace action flashes elements - same-page with query params #53

karlentwistle opened this issue Dec 4, 2024 · 9 comments

Comments

@karlentwistle
Copy link

Hey 👋

Thanks for creating and sharing such a brilliant project. My colleagues and I have had an absolute blast using it to make a native app at work.

We have encountered an issue very similar to hotwired/turbo-ios#136, and we're unsure how to circumvent it.

We have these three pages on our website:

We've added these in our native application like so:

Since we don't want Turbo to "advance" when the links are clicked, we've configured them via data-turbo-action="replace".

This prevents the page from advancing (to the right) but causes the screen to "flash".

To demonstrate the problem, I've set up a temporary fork of the turbo-native-demo, which should be accessible via:

diff --git a/Demo/Demo.swift b/Demo/Demo.swift
index 7e261e3..4428bfc 100644
--- a/Demo/Demo.swift
+++ b/Demo/Demo.swift
@@ -1,7 +1,7 @@
 import Foundation

 struct Demo {
-    static let remote = URL(string: "https://hotwire-native-demo.dev/")!
+    static let remote = URL(string: "https://hotwire-native-issue-demo-ef14973e7c91.herokuapp.com/")!
     static let local = URL(string: "http://localhost:45678")!

     /// Update this to choose which demo is run

I added a navigation menu with Features and What's New, also using data-turbo-action="replace", and clicking between the navigation links causes the same flashing to occur.

Simulator.Screen.Recording.-.iPhone.16.-.2024-12-04.at.13.35.14.mp4

I was wondering if this is expected behaviour or if you have any words of wisdom on how we can avoid this from happening.

Thanks very much.
@joemasilotti
Copy link
Member

What happens if you add the morphing tag to <head>?

<meta name="turbo-refresh-method" content="morph">

@karlentwistle
Copy link
Author

@joemasilotti Thanks for the speedy reply! I just double-checked, and we have <meta name="turbo-refresh-method" content="morph"> already set on our app backend. It's also configured in the demo.

curl -s https://hotwire-native-issue-demo-ef14973e7c91.herokuapp.com/ | head -n 8
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="turbo-refresh-method" content="morph">
    <meta name="turbo-refresh-scroll" content="preserve">

@joemasilotti
Copy link
Member

Ah, darn. Was hoping that would be the fix. One more idea, can you try the latest main as of this morning? I'm wondering if PR #50 may have helped?

@karlentwistle
Copy link
Author

karlentwistle commented Dec 4, 2024 •
edited
Loading

Oh, that's great that #50 has been merged. Since that also impacted us, we've been using the tab-bar-switching branch.

Unfortunately, concerning this issue it persists with the very latest main

Sanity check:

hotwire-native-ios git:(main) ✗ git log | head -n 1
commit 08bdabe9fa3606287acc7e157d0b04001c727927
Screenshot 2024-12-04 at 16 54 27

Testing on latest main:

Simulator.Screen.Recording.-.iPhone.16.-.2024-12-04.at.16.57.01.mp4

@Null78
Copy link

Null78 commented Jan 31, 2025

Hey,
i like the brilliant idea of turbo and native but this issue is really ruining the experience,
is there any fixes or workarounds for this issue ?

@itsyoshio
Copy link

I'm also facing this from following the Hotwire Native Book.

@joemasilotti
Copy link
Member

joemasilotti commented Feb 23, 2025 •
edited
Loading

Digging in some more, I think this is something we should address. I added a reproducible flow to the new demo site and demo iOS app.

Image

I think this should be fixed we should fix this because tapping the exact same link does not cause the flicker. So it must be technically possible. I'm going to dig in more this week.

@sausyn
Copy link

sausyn commented Feb 24, 2025

I had the same issue with tabs during a replace action.
I’ve temporarily resolved it by wrapping the content in a Turbo Frame tag.

@karlentwistle
Copy link
Author

karlentwistle commented Feb 24, 2025 •
edited
Loading

I had the same issue with tabs during a replace action. I’ve temporarily resolved it by wrapping the content in a Turbo Frame tag.

We used this as a workaround on our app for a while but found it caused more problems than solved. The ones I remember were:

Everyone had to remember that all links in the frame needed to be data-turbo-frame=_top``, and in our context, we have many nested links.

  • Built-in scroll refresh didn't work as expected (it would refresh the "parent" page).

Depending on the app and context, a frame could be a viable workaround.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@sausyn @karlentwistle @joemasilotti @itsyoshio @Null78