Overlapping text can be rendered incorrectly due to opacity peephole optimization #122266
Description
Consider a block of text where some of the characters overlap. The easiest example to create locally without needing a particular font is Zalgo text.
Given the following application, I would expect there to be uniform opacity applied to the text - as the opacity widget should create a separate composited layer.
import 'package:flutter/widgets.dart';
void main() => runApp(
const Center(
child: Opacity(
opacity: 0.5,
child: Text('asdasdasasdasdasas',
key: Key('title'),
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 100),
),
)),
);Notice how the final color varies throughout the text. This is how I would expect it to render if I set the opacity on the text style instead of with a layer.
If I insert another small widget that slightly overlaps, this disables the optimization and it renders correctly.
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() => runApp(
Center(
child: Opacity(
opacity: 0.5,
child: Stack(
textDirection: TextDirection.ltr,
children: [
Text('asdasdasasdasdasas',
key: Key('title'),
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 100),
),
Container(color: Colors.red, width: 10, height: 10,),
],
),
)),
);
Ultimately this is due to an issue wherein we only consider the bounds of the text blob, and not whether any glyphs within the blob will overlap. This assumption is generally true, but in cases where it is false there is no way to opt out of opacity peephole, which presents a problem.
cc @flar