Some Eclipse Foundation services are deprecated, or will be soon. Please ensure you've read this important communication.
Bug 354307 - [Theme] border-radius does not clip the content in IE8
Summary: [Theme] border-radius does not clip the content in IE8
Status: RESOLVED WONTFIX
Alias: None
Product: RAP
Classification: RT
Component: RWT (show other bugs)
Version: 1.5   Edit
Hardware: PC Windows XP
: P3 normal (vote)
Target Milestone: ---   Edit
Assignee: Project Inbox CLA
QA Contact:
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2011-08-09 17:38 EDT by Andreas Hoegger CLA
Modified: 2011-08-10 05:09 EDT (History)
1 user (show)

See Also:


Attachments
IE8 with overloaded borders (1.13 KB, image/png)
2011-08-09 17:39 EDT, Andreas Hoegger CLA
no flags Details
Mozilla correct border (985 bytes, image/png)
2011-08-09 17:41 EDT, Andreas Hoegger CLA
no flags Details
sample project to reproduce with product to start (14.38 KB, application/zip)
2011-08-09 17:43 EDT, Andreas Hoegger CLA
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Andreas Hoegger CLA 2011-08-09 17:38:22 EDT
Having a composite with a border radius and no padding containing any control with non transparent background the border of the composite gets overloaded with the controls background.

Code:
  Composite rootPane = new Composite(parent, SWT.NONE);
    /*
     * Composite.container {
     *   background-color: #ffffff;
     *  border: 1px solid #bbcddb;
     *  border-radius: 8px 8px 0px 0px;
     * }
     */
    rootPane.setData(WidgetUtil.CUSTOM_VARIANT, "container");
    Label l = new Label(rootPane, SWT.CENTER);
    l.setText("A text");
    rootPane.setLayout(new FillLayout());

To add also a border radius or a transparent background is no option since the same controls are reused in several contexts (dynamic controls of Scout).
Comment 1 Andreas Hoegger CLA 2011-08-09 17:39:43 EDT
Created attachment 201192 [details]
IE8 with overloaded borders
Comment 2 Andreas Hoegger CLA 2011-08-09 17:41:04 EDT
Created attachment 201193 [details]
Mozilla correct border
Comment 3 Andreas Hoegger CLA 2011-08-09 17:43:23 EDT
Created attachment 201194 [details]
sample project to reproduce with product to start
Comment 4 Ivan Furnadjiev CLA 2011-08-10 01:47:27 EDT
Firefox 4+ and current WebKit browsers use CSS3 for border-radius, which allows content to be clipped by the the rounded border. Because of some limitations of CSS3 support in IE9 it still uses VML for rounded border creation. As a result it's not possible to clip the content in IE. This is a known limitation of rounded border implementation in all browsers that does not fully support CSS3 (still use VML or SVG).
Comment 5 Ivan Furnadjiev CLA 2011-08-10 02:18:11 EDT
I tend to close it as WONTFIX. Tim, am I right?
Comment 6 Ralf Sternberg CLA 2011-08-10 05:00:50 EDT
This problem will go away when all browsers support rounded borders. In the meantime, application programmers have to work around this by adding a suitable padding. If you want the label to appear at the very top of the composite, you can also add a padding only to the left and right edge:

  padding: 0 8px;

Alternatively, you can also add a margin to the layout:

  FillLayout layout = new FillLayout();
  layout.marginWidth = 8;
  rootPane.setLayout(layout);

Since a) we cannot fix it, b) it will be resolved once we can drop support for the old browsers and c) there are workarounds, I would also close this bug as WONTFIX.
Comment 7 Ivan Furnadjiev CLA 2011-08-10 05:09:38 EDT
(In reply to comment #5 and comment #6)
> Since a) we cannot fix it, b) it will be resolved once we can drop support for
> the old browsers and c) there are workarounds, I would also close this bug as
> WONTFIX.