strong_mode / onPageShow - PageTransitionEvent is not of type (Event)

[MikeMitterer]

            dom.window.onPageShow.listen( (final dom.PageTransitionEvent event) {
                if(event.persisted) {
                    // when page is loaded from back/forward cache
                    // trigger repaint to let layout scroll in safari
                    element.style.overflowY = 'hidden';
                    dom.window.requestAnimationFrame( (_) {
                        element.style.overflowY = '';
                    });
                }
            });

gives me:

ERROR: Type check failed: (final dom.PageTransitionEvent event) {if (event.persisted) {element.style.overflowY = 'hidden'; dom.window.requestAnimationFrame((_) {element.style.overflowY = '';});}} ((PageTransitionEvent) → void) is not of type (Event) → void ([mdl] lib/src/components/MaterialLayout.dart:188)

[munificent]

The error message is ugly but correct here. According to the error, listen() expects a callback that it may invoke and pass any Event to ((Event) → void).

You are giving it a callback that declares that it only accepts dom.PageTransitionEvent ((PageTransitionEvent) → void). That isn't statically sound, since listen() is free to pass it some other subclass of Event that isn't a dom.PageTransitionEvent.

We have discussed adding language support to make enable this kind of unsound code. You can see some more discussion here: #27487. I'll close this as a duplicate of that.

To fix your code, you can do:

            dom.window.onPageShow.listen( (Event event) {
                final dom.PageTransitionEvent transitionEvent = event; // <-- downcast, may fail at runtime
                if(transitionEvent.persisted) {
                    // when page is loaded from back/forward cache
                    // trigger repaint to let layout scroll in safari
                    element.style.overflowY = 'hidden';
                    dom.window.requestAnimationFrame( (_) {
                        element.style.overflowY = '';
                    });
                }
            });