linebender / linebender/druid

How should we handle Container clipping?

Open
#853 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

discussion
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:
![](https://user-images.githubusercontent.com/543668/78307755-a23e2980-7514-11ea-8281-2f87ffc7104e.png)

What I want:
![](https://user-images.githubusercontent.com/543668/78307766-ae29eb80-7514-11ea-8063-ebacac351326.png)

What we have:
![](https://user-images.githubusercontent.com/543668/78307782-baae4400-7514-11ea-82d8-4198373487c6.png)

What I want:
![](https://user-images.githubusercontent.com/543668/78307797-c568d900-7514-11ea-8d39-9481fa4cfd08.png)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.