How should we handle Container clipping?
Nobody has claimed this yet.
- Dominant language
- Rust
- Stars
- 9.7k
- Forks
- 565
- PR merge metrics
- No merged PRs in 30d
Description
Currently Container doesn't clip its contents, which causes a problem (in my view) when the Container has rounded corners. There's also the question of where exactly to clip IRT the border width.
Here's @xStrom's comment on [my original PR](https://github.com/xi-editor/druid/pull/794):
>Both of the changes in this PR add functionality that differs from web CSS, for which I made [an example](https://jsfiddle.net/m2hsgx93/). On the web it works like this:
>* The child gets the non-rounded rect constraints and if it fills that, then it means it's happily painting over the rounded corners. This behavior can be disabled by adding `overflow: hidden;` to the container.
>* The container background is painted under the border as well, so that pieces of it appear when using a dashed border style. Different behavior can be achieved by setting the background on the child instead.
>
>Now I'm not saying that web CSS is perfect. Although it's definitely the most well known behavior, so mimicking it would be least surprising.
>
>Is this the default behavior in some other system like Flutter? I'm not familiar with Flutter, but a quick look at [the docs](https://api.flutter.dev/flutter/painting/BorderStyle-class.html) suggests that they don't have dashed borders at all.
>
>Whatever the default, I think being able to achieve both behaviors (like in CSS) is a good solution, unless it adds a ton of complexity. In druid it's already possible to achieve both (although it's not trivial) but this PR seems to remove options.
And my response:
>1. I would be happy with an option for show / hide overflow, as long as it's not confused with the basic layout sizing stuff. Maybe a method called `clip`? My goal was to keep the behaviour of container but only improve the handling of rounded corners for my own selfish purposes.
>
>2. I agree if we have dashed borders we should paint under them, so I need to fix that here. My problem with the current version (see "background before" image) is we were painting outside of even a solid border due to some mismatch between the size of the border rrect and the background rrect.
>
>3. I played around with this in Flutter: https://dartpad.dev/b6409e10de32b280b8938aa75364fa7b
Their Container doesn't clip the child corners by default (though it does clip content overflow, with a warning about overflow), and it does clip the background color correctly. To get the clipping behaviour I want I can use a ClipRRect with the same BorderRadius of the child Container and I get my desired outcome.
Would love some input!
What we have:

What I want:

What we have:

What I want:

Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the Container implementation and the original PR #794, then compare the CSS and Flutter behaviors discussed in the issue. The work is not ready to start until the clipping, overflow, border, and background behavior is decided; done should include support for the agreed behavior without removing existing options.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- rust
- Domain
- design, desktop
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100