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 · 4 comments
Open

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

karlentwistle opened this issue Dec 4, 2024 · 4 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

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
2 participants
@karlentwistle @joemasilotti