WPF/Silverlight vs. Jupiter Quirks – Opacity

Have you noticed the difference in how the Opacity property is handled by child elements the Windows 8 XAML vs. Silverlight or WPF?

Silverlight/WPF:

Windows 8 XAML (Jupiter):

I suppose it might help performance, but it’s annoying. Do you know why it’s annoying? Try to fade in a piece of UI with a few opaque layers and instead of seeing the entire piece fade in – you suddenly start seeing all its layers. Be careful about images overlaid on top of solid backgrounds! Any idea how to achieve the same result in Jupiter as in Silverlight?

This is the code I used in tests on all 3 platforms:

<Grid
        Background="Black">
        <Grid
            Opacity="0.5"
            Width="600"
            Height="600"
            VerticalAlignment="Top"
            HorizontalAlignment="Left"
            Margin="100">
            <Rectangle
                Margin="0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Width="400"
                Height="400"
                Fill="Red" />
            <Rectangle
                Margin="100,100,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Width="400"
                Height="400"
                Fill="Green" />
            <Rectangle
                Margin="200,200,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Width="400"
                Height="400"
                Fill="Blue" />
        </Grid>
    </Grid>

via Xyzzer's Dev Blog http://blog.xyzzer.me/2012/09/11/wpfsilverlight-vs-jupiter-quirks-opacity/