Skip to content

[Web][Safari][html]: Fix shadowDom preventing svg url resolution. Fix BlendMode.srcIn color effect is not rendered correctly in safari browser  #85733

@karabanovbs

Description

@karabanovbs

ColorFiltered not working in safari with web html.

With canvasKit looks good.

image

Steps to Reproduce

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ColorFiltered(
      colorFilter: ColorFilter.mode(
        Color(0xFFFF0000),
        BlendMode.srcIn,
      ),
      child: Container(
        decoration:
            BoxDecoration(color: Color(0xFF00FF00), shape: BoxShape.circle),
        width: 100,
        height: 100,
      ),
    );
  }
}

My env

Safari version: 14.1.1 (16611.2.7.1.4)

boriskarabanov@MacBook-Pro-Boris clubslane % flutter doctor        
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.2, on macOS 11.4 20F71 darwin-x64, locale ru-RU)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2021.1.2)
[✓] VS Code (version 1.57.1)
[✓] Connected device (3 available)
    ! Error: DNS s4502 is busy: Copying cache files from device. Xcode will continue when DNS s4502 is finished. (code -10)

• No issues found!

Metadata

Metadata

Assignees

Labels

P1High-priority issues at the top of the work listbrowser: safari-macosonly manifests in Safari on macOSc: renderingUI glitches reported at the engine/skia or impeller rendering levele: web_htmlHTML rendering backend for Webengineflutter/engine related. See also e: labels.found in release: 2.2Found to occur in 2.2has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyr: fixedIssue is closed as already fixed in a newer versionwaiting for PR to land (fixed)A fix is in flight

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions