[web] Shadows on flutter_web not rendering like shadows in flutter

[KevinTheGray]

Describe the bug
Using this exact code on both web and mobile results in noticeably different rendered output.
I expect that the rendering of shadows should be consistent. The most noticeable difference can be noticed between the BoxShadow, but Material with elevation seems to render differently as well. I use both as an example here.

void main() {
  runApp(
    Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Container(
            height: 200.0,
            width: 200.0,
            decoration: BoxDecoration(
              color: Colors.orange,
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: Colors.black38,
                  blurRadius: 6.0,
                  offset: new Offset(4.0, -4.0),
                  spreadRadius: 0.0,
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 20.0),
          ),
          Container(
            height: 200.0,
            width: 200.0,
            child: Material(
              color: Colors.lightBlueAccent,
              elevation: 8.0,
            ),
          ),
        ],
      ),
    ),
  );
}

To Reproduce
Use the code above, and run on web and mobile. You should notice the same thing as in the images below

Expected behavior
Shadows should render similarly if not exactly the same.

Screenshots
On the left is Chrome, on the right an iOS emulator:

Desktop (please complete the following information):

• OS: macOS 10.14.4 (18E226)
• Browser: Chrome Version 73.0.3683.103 (Official Build) (64-bit)
• Dart Version: 2.2.1 (build 2.2.1-dev.4.0 None)
• Flutter Web commit SHA:ecbdadf118b497f41c4ed4599baa0cc1c1c0fc08

[aloisdeniel]

It also seems that children'shadow is cropped :

 Stack > Positioned > Transform > Container (with a BoxDecoration containing BoxShadows)

flutter

flutter_web

[NicTanghe]

          child: Container(
            decoration: BoxDecoration(
              boxShadow: [
                new BoxShadow(
                  color: Colors.black54,
                  offset: new Offset(13, 13),
                  blurRadius: blurz,
                )
              ],

[7Kronos]

I got also an issue when I add an Image widget (anywhere in the page). The shadow do not render blury gradient but (almost) solid lines.

[rayliverified]

The issue is worse when elevation is increased.

Here, I've set an elevation of 8.

Android

Web

[edeuss]

@yjbanov Thank you for working on this issue.

[rydmike]

Happy to find that this is an issue being worked on already. I was considering adding it otherwise. Just as info, the Flutter Community is looking forward to a resolution of this issue as well. It was e.g. recently mentioned in this tweet, here and here. Here is a link to a brief gist I made for the tweets, where it is demonstrated as well, but I think this issue has it all covered well enough. I just wanted to give my support and thumbs up 👍 for working on the issue!

[yjbanov]

Update: as I was trying to understand how shadows worked in Flutter for mobile, I discovered an issue there too. My current plan is, instead of emulating what mobile does, I'll do something "reasonable". For example, we blur too aggressively, our HTML shadows do not match canvas shadows, they do not work on Safari canvas, and our bounds estimator does not match either (which is what I think causes the clipping). I'll fix these issues, but the shadows will still be a bit different from mobile.

[rydmike]

Thanks for looking into this issue and working on it. The things you found and mention in issue 51237 are indeed a bit different from this case. I have however seen the matter you mention in the new issue you made as well and will add some comments to it there.

I think this issue should focus on getting shadows on HTML to look the same as they do on Android/iOS (and Desktop) given the same Flutter shadow or material elevation input. As far as I have seen given the same input the shadows and elevations on Android/iOS/Mac/Win are fairly close already, but web is totally different to the extent that it is broken, it looks totally wrong and cannot even be used as the look will deviate a lot from what was intended if designed on mobile/tablet/desktop.

As for the issue in 51237 I think that is more a matter of how the imaginary light source that casts the elevation shadows is placed and that the current placement is not so suitable for larger surfaces. I will drop a comment on it there with some examples as well.

[ds84182]

Shadows are also incorrectly clipped in Chrome when using a custom ShapeBorder, which can be seen in #50508's example images.

This is because clip-path clips the box shadow also, so you need to use CSS filter drop-shadows on the parent element (see https://css-tricks.com/using-box-shadows-and-clip-path-together/).

[cbracken]

Re-openened post-revert until re-land. /cc @yjbanov

[IoanaAlexandru]

Wanted to add another simple example of this occurrence:

Padding > Container with BoxDecoration (with BoxShadow)

Code to reproduce

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(30.0),
          child: Container(
              width: 100,
              height: 100,
              decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(color: Colors.black, blurRadius: 12.0),
                  ],
                  shape: BoxShape.circle,
                  image: DecorationImage(
                      fit: BoxFit.fill,
                      image: NetworkImage(
                          'https://images.theconversation.com/files/93616/original/image-20150902-6700-t2axrz.jpg')))),
        ),
      ),
    );
  }
}

[alexpavelm]

Quick workaround - Add one more container on top and set it as transparent with your fixed size.
color: Colors.transparent

This makes it draw the entire container therefore not clipping it's child container, so you can add padding to the child and make enough space for the shadows.

Container(
  width: 100,
  height: 100,
  color: Colors.transparent,
  child: Padding(
    padding: const EdgeInsets.all(15.0),
    child: Container(
        decoration: BoxDecoration(
            boxShadow: [
          BoxShadow(color: Colors.black, blurRadius: 12.0),
        ],
            shape: BoxShape.circle,
            image: DecorationImage(
                fit: BoxFit.fill,
                image: NetworkImage(
                    'https://images.theconversation.com/files/93616/original/image-20150902-6700-t2axrz.jpg')))),
  ),
),

[LucasAschenbach]

Is this fix already available on the beta channel? Somehow, I just encountered this very same issue in my app:

[√] Flutter (Channel beta, v1.14.6, on Microsoft Windows [Version 10.0.18363.720], locale
de-DE)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[√] Chrome - develop for the web
[√] Android Studio (version 3.5)
[√] VS Code (version 1.43.0)
[√] VS Code, 64-bit edition (version 1.43.0)
[√] Connected device (2 available)

• No issues found!

[edeuss]

No the beta and stable channel haven't been updated in 2-3 months for some reason. @LucasAschenbach

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.