Routing with WebView

Bug Reports
1

Hi the Fuser Crew,

Seems like there is a bug with the navigator routing when containing a Webview.

Here is a repro test case for the team:

<ClientPanel ux:Class="Gog">
    <Router ux:Dependency="router" />
    <JavaScript>

    this.onParameterChanged(function(param) {
        google.goto("https://www.google.ca/&quot;);
    })

    module.exports= {
        goBack:function() {
            router.goBack();
        }
    }

    </JavaScript>
    <BackButton Dock="Top" Height="38">
        <Clicked>
            <Callback Handler="{goBack}" />
        </Clicked>
    </BackButton>
    <NativeViewHost>
        <WebView ux:Name="google"/>
    </NativeViewHost>
</ClientPanel>

Navigating to this page works BUT goBack does not. When I click the back button you can see the page is actually removed because I can see the previous page in the background but somehow the WebView does not get removed with the page.

Details:

OS = Windows 10

Fuse Version = v0.24

Cheers,

Elizabeth

2

Hi Elizabeth, which mobile platform are you targeting?

3

Hi Andreas,

I am currently testing on Andriod 4.4 but my app is for both Andriod and IOS.

Cheers.

Elizabeth

4

Thanks for reporting!

I have submitted a high priority ticket for this issue :slight_smile:

Thanks for your patience

5

Much Appreciated Vegard!

Cheers,

Elizabeth

6

Are you able to share the project where this triggers in? We are not able to reproduce this with the code provided.

You might be hitting some corner case that only occures in a larger project.

7

Hi Vegard,

After reading your reply, I have quickly whiped up another small repro test case. Upon creation, I’ve discovered that the bug is somehow related to using Navigator Transition="None".

I have uploaded the test case zip to here: https://www.dropbox.com/request/ZgndLtJQm5eGzG9cicGK.

Hope all helps!

Cheers,

Elizabeth

8

Hi!

<Navigator Transition="None" /> wont have any transitions as expected, in this case it will BringToFront the new active page. Which mean it relies on zorder. <NativeViewHost /> only lets you host native views inside fuse layout, so the native view will always be ontop. An option is to hide the native view when its zorder is not on top anymore, but I think that would lead to more WAT moments in other cases.

But there are two options here:

  • Hiding the NativeViewHost while the page its on is inactive.

    <WhileInactive>
  <Change _nativeViewHost.Visibility="Hidden" />
</WhileInactive>

  • Enabeling RenderToTexture when the page is inactive.

    <WhileInactive>
  <Change _nativeViewHost.RenderToTexture="true" />
</WhileInactive>

Using the RenderToTexture option will give you zorder so that fuse can draw ontop of it. However when RenderToTexture is enabled the native view wont accept inputevents

This issue have been reported by several people, I think we need to report to the user somehow when cases like this occur in UX.

Please feel free to share your thoughts on this

9

Hi Vegard!

Oh, okay. Now all makes sense!

Then, I’ll probably stick with my current method:

<WhileInactive>
	<Move Target="this" Y="1" RelativeTo="Size" />
</WhileInactive>

Seems to be able to avoid both the above methods side effects!

Thank you for looking into this!

Cheers,

Elizabeth

10

Thanks for your reply Elizabeth.

I would advice against using your method. It will only animate the WebView outside of the screen, some combination of navigation might “cancel out” that Move making the WebView appear again. Setting the Visibility="Hidden" is the logical choice

11

Oh. Okay. Thank you for the advice Vegard! I have noted this down and just incase others are not aware, I will also share this thread on slack!

Cheers,

Elizabeth