Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TileMode.mirror/repeated not implementing correctly on web #45505

Closed
chonghorizons opened this issue Nov 24, 2019 · 10 comments
Closed

TileMode.mirror/repeated not implementing correctly on web #45505

chonghorizons opened this issue Nov 24, 2019 · 10 comments
Labels
a: images Loading, displaying, rendering images found in release: 1.20 Found to occur in 1.20 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on. P3 Priority 3 issue (the default for issues we're likely to work on after P0-P2 issues) platform-web Web applications specifically severe: rendering UI glitches reported at the engine/skia rendering level.

Comments

@chonghorizons
Copy link

chonghorizons commented Nov 24, 2019

I was trying to test out the examples for TileMode in the DartPad experimental.

In using simple sample code, the TileMode is not working correctly. That is, when I use TileMode.mirror (or TileMode.repeated), I expect to get mirrored gradients in the sample code. Instead, I just get the last value repeated forever; i.e. like TileMode.clamp

image

Instead, I wanted to get things like in the api docs (https://api.flutter.dev/flutter/dart-ui/TileMode-class.html) that look like this:

image

Here is sample code that I ran here: https://dartpad.dartlang.org/experimental/new_embeddings_demo.html

import 'package:flutter/material.dart';

class ExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hey there, boo!'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [Aaa()],
      ),
    );
  }
}

class Aaa extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 250,
      height: 250,
      child: Stack(
        children: <Widget>[
          Container(
            width: 250,
            height: 250,
            color: Colors.white,
          ),
          Container(
            padding: EdgeInsets.all(15.0),
            alignment: Alignment.bottomCenter,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment(-1.0,0),
                end: Alignment(-0.8,0),
                tileMode: TileMode.mirror,
                colors: <Color>[
                  Colors.black,
                  // Colors.black.withAlpha(0),
                  Colors.red,
                  // Colors.blue,
                ],
              ),
            ),
            child: Text(
              "Foreground Text",
              style: TextStyle(color: Colors.white, fontSize: 20.0),
            ),
          ),
        ],
      ),
    );
  }
}

@chonghorizons
Copy link
Author

Verified this is NOT an issue for normal flutter (on a mobile device).

Ran similar code in IphoneEmulator and it renders fine:

image

@chonghorizons
Copy link
Author

Verified: This is an issue with flutter web, not just the DartPad implementation. The same code that ran the above example generates this in the web view:

image

In case it's needed, the generating code is the above Aaa widget, modified to take inputs of the tileMode and message, and then rendered in a column. That is:

Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Aaa(TileMode.clamp, "TileMode.clamp"),
            Aaa(TileMode.mirror, "TileMode.mirror"),
            Aaa(TileMode.repeated, "TileMode.repeated"),
          ]
)

@iapicca iapicca added a: images Loading, displaying, rendering images severe: rendering UI glitches reported at the engine/skia rendering level. platform-web Web applications specifically labels Nov 25, 2019
@iapicca
Copy link
Contributor

iapicca commented Nov 25, 2019

Hi @chonghorizons
could you please provide your updated flutter doctor -v ?
Thank you

@iapicca iapicca added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds. label Nov 25, 2019
@chonghorizons
Copy link
Author

Sure. Here you go:

flutterLast login: Sun Nov  3 01:20:13 on ttys000
Macs-MacBook-Air:~ howardchong$ flutter doctor -v
[✓] Flutter (Channel dev, v1.12.11, on Mac OS X 10.14.6 18G87, locale en-US)
    • Flutter version 1.12.11 at /Users/howardchong/Proj2019/flutterDev/flutter
    • Framework revision f40dbf8ca0 (2 days ago), 2019-11-23 01:02:54 -0500
    • Engine revision d1cac77d5a
    • Dart version 2.7.0

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/howardchong/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling
      support)
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_152-release-1343-b01)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.2, Build version 11B52
    • CocoaPods version 1.8.4

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 3.4)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 39.0.1
    • Dart plugin version 183.6270
    • Java version OpenJDK Runtime Environment (build
      1.8.0_152-release-1343-b01)

[✓] VS Code (version 1.39.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.6.0

[✓] Connected device (4 available)
    • iPhone     • 35b20d3ec2dea734f40dd25b0c5f631d20a83ee6 • ios            •
      iOS 10.3.4
    • iPhone 8   • 359D18A6-CE3E-4EE5-B459-D3AD32DA565C     • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-13-2 (simulator)
    • Chrome     • chrome                                   • web-javascript •
      Google Chrome 78.0.3904.108
    • Web Server • web-server                               • web-javascript •
      Flutter Tools

• No issues found!
Macs-MacBook-Air:~ howardchong$ 

@no-response no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds. label Nov 25, 2019
@yjbanov
Copy link
Contributor

yjbanov commented Dec 5, 2019

We're looking for a solution, but on the Web it's not supported in canvas APIs. We are exploring alternatives. Stay tuned.

@yjbanov yjbanov added this to the Goals milestone Dec 5, 2019
@chonghorizons
Copy link
Author

I actually don't think this is a high priority. I was just confused for a while.

The fastest temporary solution is just to throw a warning or error.

@kf6gpe kf6gpe added the P4 Priority 4 issue (default for bugs, things we're likely to work on) label May 29, 2020
@ferhatb ferhatb changed the title TileMode.mirror not implementing correctly on web TileMode.mirror/repeated not implementing correctly on web Jun 15, 2020
@yjbanov yjbanov added P5 Priority 5 issue (default for new feature requests; things we'd like to work on) and removed P4 Priority 4 issue (default for bugs, things we're likely to work on) labels Jun 16, 2020
@iapicca
Copy link
Contributor

iapicca commented Jun 17, 2020

Hi all
please see the repro steps here
Thank you

@iapicca iapicca added found in release: 1.20 Found to occur in 1.20 has reproducible steps The issue has been confirmed reproducible and is ready to work on. labels Jun 17, 2020
@iapicca iapicca added the framework flutter/packages/flutter repository. See also f: labels. label Jul 6, 2020
@Hixie Hixie removed this from the None. milestone Aug 17, 2020
@ferhatb
Copy link
Contributor

ferhatb commented Nov 13, 2020

Due to #46833 , moving to P3.

@ferhatb ferhatb added P3 Priority 3 issue (the default for issues we're likely to work on after P0-P2 issues) and removed P5 Priority 5 issue (default for new feature requests; things we'd like to work on) labels Nov 13, 2020
@ferhatb
Copy link
Contributor

ferhatb commented Dec 2, 2020

Fixed via flutter/engine#22597

@ferhatb ferhatb closed this as completed Dec 2, 2020
[web] Rendering API / Fidelity automation moved this from To Do to Done Dec 2, 2020
@github-actions
Copy link

github-actions bot commented Aug 9, 2021

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 9, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
a: images Loading, displaying, rendering images found in release: 1.20 Found to occur in 1.20 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on. P3 Priority 3 issue (the default for issues we're likely to work on after P0-P2 issues) platform-web Web applications specifically severe: rendering UI glitches reported at the engine/skia rendering level.
Development

No branches or pull requests

6 participants