border-radius does not respect overflow: hidden

[RWD-Biggs]

As per the CSS specifications, setting border-radius and overflow: hidden on an element should cause all child elements to be clipped to the border curve. This currently does not happen (at least not with the SDL2 renderer).

Expected result:

Actual result:

Fiddle showing border-radius and overflow: hidden working in the browser: http://jsfiddle.net/d31hpo5j/7/

[mikke89]

Thanks for posting, and yes, you're right, we deviate from the CSS specs in this regard.

If we want to support this we would need to add additional API to the render interface, so that clients can generate appropriate stencil buffers and use that as a clipping mask. This adds quite a lot of complexity, not only for the library but also for all users implementing a render interface.

At this stage I don't believe the usefulness of this functionality outweigh that complexity. In most use cases there should be workarounds too. Thus, I will consider this a wontfix at least for now.

[RWD-Biggs]

I would argue that excluding this feature severely limits the usability of border-radius, and that implementing it should be fairly straight forward and should only require an extra render pass for the parent element to render to the stencil buffer (besides the calls to enable/disable the stencil buffer). I'd be more than happy to look into a solution if I get the time, if that helps.

[mikke89]

I'm worried things can get hairy when we consider more complex situations such as multiple nested elements with different border-radii settings combined with scrolling and rectangular clipping, and possibly transforms. It will also be more difficult to determine when we need to enable clipping, although I guess a conservative estimate should be possible (see eg. #235).

I'd appreciate it and I will certainly consider it if you come up with a solution that is not too complicated and handles situations as outlined above.

We would not want to require clients to use stencil buffers though, eg. the SDL2 sample does not use this at all. I'd be fine with a single added optional rendering function for a more advanced clipping mask. Any solution should be backward compatible, users not implementing this should then get the old behavior.

[mikke89]

Closing due to inactivity. Feel free to reopen if there is any work in this direction.

[mikke89]

I'm reopening this one. It is now being worked on as part of the RmlUi 5.0 features, which also includes filters and masks (currently in the filter branch).