Repository: flutter
Issue: Fidelity issues in edge cases with drawDRRect on both web and desktop.
Labels: platform-ios,engine,platform-mac,dependency: skia,has reproducible steps,P2,found in release: 3.0,found in release: 3.1,team-ios,triaged-ios

Please take a look at the code below. If you change, in the first sample, inner's `topLeft: Radius.elliptical(3.9, 57.3)` to `topLeft: Radius.elliptical(4.0, 57.3)` the issue disappears. `3.8`? Also gone. I also recorded a video of how lerping between values "flashes" in the middle for mysterious reasons.

<img width="990" alt="image" src="https://user-images.githubusercontent.com/351125/182054214-69dc896c-355c-4523-bede-0fd09fe88e31.png">


Calling `canvas.drawRRect` on either `inner` or `outer` shows the expected rectangle. So the issue is really with `drawDRRect`, I have no idea why.

I found different issues in different renderers, couldn't find the same issue happening in all of them.

```dart
// Green sample. Only fails in macOS Desktop. Seems to work in CanvasKit and HTML renderer.
final inner = RRect.fromLTRBAndCorners(253.4, 132.0, 600.0, 278.6, topLeft: Radius.elliptical(3.9, 57.3), topRight: Radius.circular(57.3), bottomRight: Radius.elliptical(57.3, 3.9), bottomLeft: Radius.circular(3.9));
final outer = RRect.fromLTRBAndCorners(195.2, 132.0, 600.0, 336.8, topLeft: Radius.elliptical(62.2, 57.3), topRight: Radius.circular(57.3), bottomRight: Radius.elliptical(57.3, 62.2), bottomLeft: Radius.circular(62.2));
canvas.drawDRRect(outer, inner, Paint()..color = Color(0x80008050));
```

```dart
// Yellow sample. Only fails in HTML Renderer. Works in CanvasKit and macOS desktop.
final inner = RRect.fromLTRBAndCorners(317.8, 181.0, 669.5, 332.7, topLeft: Radius.elliptical(51.7, 100.0), topRight: Radius.circular(100.0), bottomRight: Radius.elliptical(100.0, 51.7), bottomLeft: Radius.circular(51.7));
final outer = RRect.fromLTRBAndCorners(261.0, 181.0, 669.5, 389.5, topLeft: Radius.elliptical(108.5, 100.0), topRight: Radius.circular(100.0), bottomRight: Radius.elliptical(100.0, 108.5), bottomLeft: Radius.circular(108.5));
canvas.drawDRRect(outer, inner, Paint()..color = Color(0x80ff8050));
```

<details>
  <summary>Click to see the full source code!</summary>
  
```dart
import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
        children: [
          CustomPaint(painter: YellowPainter()),
          CustomPaint(painter: GreenPainter()),
        ]
        ),
      ),
    );
  }
}

class YellowPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // Yellow sample. Only fails in HTML Renderer. Works in CanvasKit and macOS desktop.
    final inner = RRect.fromLTRBAndCorners(317.8, 181.0, 669.5, 332.7, topLeft: Radius.elliptical(51.7, 100.0), topRight: Radius.circular(100.0), bottomRight: Radius.elliptical(100.0, 51.7), bottomLeft: Radius.circular(51.7));
    final outer = RRect.fromLTRBAndCorners(261.0, 181.0, 669.5, 389.5, topLeft: Radius.elliptical(108.5, 100.0), topRight: Radius.circular(100.0), bottomRight: Radius.elliptical(100.0, 108.5), bottomLeft: Radius.circular(108.5));
    canvas.drawDRRect(outer, inner, Paint()..color = Color(0x80ff8050));
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

class GreenPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // Green sample. Only fails in macOS Desktop. Seems to work in CanvasKit and HTML renderer.
    final inner = RRect.fromLTRBAndCorners(253.4, 132.0, 600.0, 278.6, topLeft: Radius.elliptical(3.9, 57.3), topRight: Radius.circular(57.3), bottomRight: Radius.elliptical(57.3, 3.9), bottomLeft: Radius.circular(3.9));
    final outer = RRect.fromLTRBAndCorners(195.2, 132.0, 600.0, 336.8, topLeft: Radius.elliptical(62.2, 57.3), topRight: Radius.circular(57.3), bottomRight: Radius.elliptical(57.3, 62.2), bottomLeft: Radius.circular(62.2));
    canvas.drawDRRect(outer, inner, Paint()..color = Color(0x80008050));
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
```
</details>

https://user-images.githubusercontent.com/351125/182053077-3ec5f52e-92a8-4bcf-aab0-f86155205eb7.mov

What to expect from the sample:
<img width="970" alt="image" src="https://user-images.githubusercontent.com/351125/182055045-27c32a8a-e20c-4d48-a89e-5514581c3c57.png">

```
[!] Flutter (Channel MultiBorderSide, 3.1.0-0.0.pre.1992, on macOS 11.4 20F71 darwin-x64, locale en-BR)
    • Flutter version 3.1.0-0.0.pre.1992 on channel MultiBorderSide at /Users/bernardoferrari/Downloads/flutter
    ! Upstream repository git@github.com:bernaferrari/flutter.git is not a standard remote.
      Set environment variable "FLUTTER_GIT_URL" to git@github.com:bernaferrari/flutter.git to dismiss this error.
    • Framework revision 78675b5084 (32 hours ago), 2022-07-30 13:39:31 -0300
    • Engine revision 12a9739fba
    • Dart version 2.19.0 (build 2.19.0-43.0.dev)
    • DevTools version 2.15.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.
```