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

Document the issue of antialiasing when same-colour blocks abut, and some workarounds (API docs, FAQ) #14288

Open
radzish opened this issue Jan 26, 2018 · 8 comments

Comments

@radzish
Copy link

commented Jan 26, 2018

Steps to Reproduce

Following source code:

import 'package:flutter/material.dart';

const Color color = const Color.fromARGB(255, 100, 100, 100);

void main() =>
    runApp(
      new Container(
        color: const Color.fromARGB(255, 0, 0, 0),
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.end,
          textDirection: TextDirection.ltr,
          children: [
            new Expanded(
              child: new Container(
                color: color,
              ),
            ),
            new Expanded(
              child: new Container(
                color: color,
              ),
            ),
            new Expanded(
              child: new Container(
                color: color,
              ),
            ),
            new Expanded(
              child: new Container(
                color: color,
              ),
            ),
            new Expanded(
              child: new Container(
                color: color,
              ),
            ),
            new Expanded(
              child: new Container(
                color: color,
              ),
            ),
            new Expanded(
              child: new Container(
                color: color,
              ),
            ),
          ],
        ),
      ),
    );

produces following result:

screenshot_1516967958

Looks like background of the container is popping out and we see vertical lines. That should not be the case as all children of the row are Expanded and thus should fill the whole area.
If we remove one child lines are gone.

Logs

Launching lib/main.dart on Android SDK built for x86 in debug mode...
Initializing gradle...
Resolving dependencies...
Running 'gradlew assembleDebug'...
Built build/app/outputs/apk/app-debug.apk (22.4MB).
I/FlutterActivityDelegate( 8398): onResume setting current activity to this
D/EGL_emulation( 8398): eglMakeCurrent: 0xaad2c640: ver 3 1 (tinfo 0xa057c5b0)
E/eglCodecCommon( 8398): glUtilsParamSize: unknow param 0x000082da
E/eglCodecCommon( 8398): glUtilsParamSize: unknow param 0x000082da
E/eglCodecCommon( 8398): glUtilsParamSize: unknow param 0x00008cdf
E/eglCodecCommon( 8398): glUtilsParamSize: unknow param 0x00008cdf
E/eglCodecCommon( 8398): glUtilsParamSize: unknow param 0x00008824
E/eglCodecCommon( 8398): glUtilsParamSize: unknow param 0x00008824
D/        ( 8398): HostConnection::get() New Host Connection established 0xa31a3640, tid 8416
D/EGL_emulation( 8398): eglMakeCurrent: 0xaad2c640: ver 3 1 (tinfo 0xa3183790)
D/EGL_emulation( 8398): eglMakeCurrent: 0xaad2c760: ver 3 1 (tinfo 0xa057cc10)
Syncing files to device Android SDK built for x86...

Flutter Doctor

[✓] Flutter (on Linux, locale en_US.UTF-8, channel master)
    • Flutter version unknown at <path_to_flutter>
    • Framework revision 5ae770345a (3 days ago), 2018-01-23 13:46:14 -0800
    • Engine revision 171d032f86
    • Tools Dart version 2.0.0-dev.16.0
    • Engine Dart version 2.0.0-edge.93d8c9fe2a2c22dc95ec85866af108cfab71ad06

[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    • Android SDK at <path_to_android>
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-27, build-tools 27.0.3
    • ANDROID_HOME = <path_to_android>
    • Java binary at: <path_to_android-studio>/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-915-b01)

[✓] Android Studio (version 3.0)
    • Android Studio at <path_to_android-studio>
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-915-b01)

[✓] Connected devices
    • Android SDK built for x86 • emulator-5554 • android-x86 • Android 8.1.0 (API 27) (emulator)
@radzish

This comment has been minimized.

Copy link
Author

commented Jan 26, 2018

Another example (I believe it is somehow related: )

import 'package:flutter/material.dart';

const Color grey = const Color.fromARGB(255, 100, 100, 100);
const Color black = const Color.fromARGB(255, 0, 0, 0);

void main() =>
    runApp(
      new Container(
        color: grey,
        child: new Center(
          child: new Container(
            width: 151.0,
            height: 151.0,
            color: black,
            child: new Container(
              color: grey,
            ),
          ),
        ),
      ),
    );

screenshot_1516968839

We should not see border here. If widht/height are changed to 150.0, square is gone.

@Hixie

This comment has been minimized.

Copy link
Contributor

commented Jan 29, 2018

This is normal behaviour. What's happening is that the boxes are not quite aligned with pixel boundaries, so there's some anti-aliasing happening on the boundaries, which involves transparency, which means that for those pixels the two grays are overlapping and looking darker.

As a general rule when doing anti-aliasing you want to avoid putting identically-coloured boxes adjacent or over each other unless you can guarantee physical pixel alignment.

Alternatively, you can use saveLayer (or RepaintBoundary) to cause a bunch of paint operations to get merged into one and composited as one. Not sure that that would help in these cases specifically but it is a tool that can be useful in this kind of situation.

@radzish

This comment has been minimized.

Copy link
Author

commented Jan 30, 2018

This is not boxes overlapping, but rather spare space between boxes, so color of background is popping up. I was changing background to different color and this color was popping out.

@radzish

This comment has been minimized.

Copy link
Author

commented Feb 22, 2018

Root cause is that boxes can not be aligned with physical pixels. I would not call it "normal", I would rather call it "expected".
On android similar (semantically) case is handled properly:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:background="#000000"
    tools:context="com.radzish.android_lines_bug.MainActivity">

    <FrameLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:background="#646464"
        android:layout_height="match_parent"/>

    <FrameLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:background="#646464"
        android:layout_height="match_parent"/>

    <FrameLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:background="#646464"
        android:layout_height="match_parent"/>

    <FrameLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:background="#646464"
        android:layout_height="match_parent"/>

    <FrameLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:background="#646464"
        android:layout_height="match_parent"/>

    <FrameLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:background="#646464"
        android:layout_height="match_parent"/>

    <FrameLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:background="#646464"
        android:layout_height="match_parent"/>

</LinearLayout>

So I think flutter should improve in this case.
The only workaround I found for me at the moment is sizing children manually like this:

    int CHILDREN_COUNT = 7;
    List<Widget> children = new List(CHILDREN_COUNT);

    MediaQueryData mediaQueryData = MediaQuery.of(context);
    int physicalWidth = (mediaQueryData.size.width * mediaQueryData.devicePixelRatio).floor();

    for (int i = 0, pixelsLeft = physicalWidth; i < CHILDREN_COUNT; i++) {
      int columnWidth = (pixelsLeft / (CHILDREN_COUNT - i)).floor();

      children[i] = new Container(
        width: columnWidth / mediaQueryData.devicePixelRatio,
        color: color,
      );

      pixelsLeft -= columnWidth;
    }

@Hixie Hixie changed the title Expanded elements not taking the whole are of their parent Expanded elements not taking the whole area of their parent May 29, 2018

@Hixie Hixie changed the title Expanded elements not taking the whole area of their parent Document the issue of antialiasing when same-colour blocks abut, and some workarounds May 29, 2018

@Hixie Hixie added the d: api docs label May 29, 2018

@Hixie Hixie added this to the Goals milestone May 29, 2018

@Hixie Hixie changed the title Document the issue of antialiasing when same-colour blocks abut, and some workarounds Document the issue of antialiasing when same-colour blocks abut, and some workarounds (API docs, FAQ) May 29, 2018

@zoechi zoechi added framework and removed framework labels Dec 4, 2018

@zoechi

This comment has been minimized.

Copy link
Contributor

commented Dec 17, 2018

There are also

@Hixie

This comment has been minimized.

Copy link
Contributor

commented Feb 15, 2019

@radzish what is Android doing to avoid the problem?

@Hixie

This comment has been minimized.

Copy link
Contributor

commented Feb 15, 2019

These comments have suggestions for things to put in documentation:
#14288 (comment)
#17084 (comment)
#15035 (comment)

@DenisBogatirov

This comment has been minimized.

Copy link

commented Jul 18, 2019

Any updates here? Because this is very annoying((
Or any examples how to use saveLayer or RepaintBoundary?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.