Transition properties not registering properly on mobile Safari about aphrodite HOT 8 CLOSED

It looks like the problem is caused by the following , 100000ms !important as it misses a property I guess. The second example (Safari 9.1) seems to have the opacity property which is somehow missing above. I act on the assumption that this is not caused by the prefixer as it should return the same values independent of which browser is used.

from aphrodite.

@rofrischmann You're right, that is very strange! @crm416 can you paste the aphrodite code you used to generate those styles?

from aphrodite.

If we could merge this then people could paste their code in the tool and share their jsbin clone :-)

from aphrodite.

😅 nevermind. They'd have to update the bin's initial code (which would be cool too).

Maybe I could enhance the tool to update the URL with the code...

from aphrodite.

The tool's been updated, maybe it'll be helpful :-) https://output.jsbin.com/qoseye

from aphrodite.

Thanks for your response @rofrischmann! Apologies, I must've been testing with a dirty branch when I made that screenshot. Here are the accurate styles on mobile Safari:

(Notice that the opacity property is back.)

As an aside, this is also recognized, so I don't think the stray duration on the end is problematic:

In particular, that style adds an extra 500ms / all transition:

For completeness, here's the Aphrodite snippet:

const echoAnimationMs = 100000;
const echoAnimationOffsetY = 50;

const styles = StyleSheet.create({
    enter: {
        opacity: 1,
        transform: 'translateY(0)',
    },

    enterActive: {
        opacity: 0,
        transform: `translateY(-${echoAnimationOffsetY}px)`,
        transition: `transform ${echoAnimationMs}ms, `
            + `opacity ${echoAnimationMs}ms`,
    },
});

from aphrodite.

@crm416 can you try 1.2.0 and let us know if this is still an issue?

from aphrodite.

Closing this as stale. Please re-open this is still an issue!

from aphrodite.