Repository: flutter
Issue: BoxDecoration of nested containers are not rendered correctly in iOS
Labels: platform-ios,engine,platform-mac,c: rendering,has reproducible steps,P2,found in release: 2.8,found in release: 2.9,team-ios,triaged-ios

A specific combination of two nested containers (see code sample), each one with a `BoxDecoration` are rendered incorrectly when put in a scrollable widget such as a `ListView`.

In the provided example, we have two nested containers: the first one has a BoxDecoration with a yellow color and a border radius, its child is a Container with a second BoxDecoration with a blue color with opacity, so that the final result should yield a container with a greenish tint.

When this tree of widgets is put in a ListView, as soon as we start scrolling the greenish tint is lost and the widget appears blue, as if the color of the first decoration is lost and only the effect of the inner decoration is taken into account.

This is a screenshot taken just after the app has launched:
![screen1](https://user-images.githubusercontent.com/6697707/150377093-0ab8548f-2a36-4eb1-b88b-4ba26322aa5c.jpg)


This happens as soon as we scroll the elements of the list:
![screen2](https://user-images.githubusercontent.com/6697707/150377108-86a4b9cd-3af5-4ffb-a582-c82ee1977841.jpg)


This is how the "card" widget is defined:
```dart
Container(
  clipBehavior: Clip.hardEdge,
  decoration: BoxDecoration(
    color: Colors.yellow,
    borderRadius: BorderRadius.circular(18),
  ),
  child: Container(
    decoration: BoxDecoration(
      color: Colors.blue.withOpacity(0.3),
    ),
    child: Center(
      child: Text(title),
    ),
  ),
```

This issue only appears in iOS, not on Android or web.
This issue appeared after updating to Flutter 2.8.0
No error is logged when running the application with `flutter run --verbose`

## Steps to Reproduce

1. Execute `flutter run` on the code sample
2. Start scrolling the horizontal list of widgets

**Expected results:**
The widget should be rendered with a greenish tint and their color should not change when the list is scrolled.

**Actual results:**
The widgets are rendered correctly but start glitching as soon as the list is scrolled.

<details>
<summary>Code sample</summary>

```dart
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => const MaterialApp(home: MyHomePage());
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final titles = ['Card 1', 'Card 2', 'Card 3'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 200,
          child: ListView.builder(
            // <- having a scrollable list of CardWidget is required to trigger the issue
            itemCount: titles.length,
            scrollDirection: Axis.horizontal,
            itemBuilder: (context, index) {
              return CardWidget(title: titles[index]);
              // if we wrap the CardWidget with a Padding widget, the issue is NOT triggered
              //   return Padding(
              //     padding: const EdgeInsets.all(8.0),
              //     child: CardWidget(title: titles[index]),
              //   );
            },
          ),
        ),
      ),
    );
  }
}

class CardWidget extends StatelessWidget {
  final String title;

  const CardWidget({
    required this.title,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 1.6,
      child: Container(
        clipBehavior: Clip.hardEdge, // <- the issue is triggered when clipBehavior of the OUTER container is Clip.hardEdge
        decoration: BoxDecoration(
          color: Colors.yellow,
          borderRadius: BorderRadius.circular(18), // <- a borderRadius is mandatory to trigger the issue
        ),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.blue.withOpacity(0.3),
          ),
          child: Center(
            child: Text(title),
          ),
        ),
      ),
    );
  }
}
```

</details>

<details>
  <summary>Logs</summary>

```
Analyzing decoration_bug...                                             
No issues found! (ran in 1.8s)
```

```
[✓] Flutter (Channel stable, 2.8.1, on macOS 12.1 21C52 darwin-arm, locale it-IT)
    • Flutter version 2.8.1 at /Users/ezamagni/Library/Developer/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 77d935af4d (5 weeks ago), 2021-12-16 08:37:33 -0800
    • Engine revision 890a5fca2e
    • Dart version 2.15.1

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.


[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).

[✓] VS Code (version 1.63.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.32.0

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 97.0.4692.71

! Doctor found issues in 2 categories.
```

</details>


https://user-images.githubusercontent.com/6697707/150373837-c5333a3c-d0d6-4135-a902-b436d4bf5117.mov