[SOLVED] border-radius (CSS3) sometimes fails in Chrome

[frankmanl]

I'm building a site in HTML5, using CSS3 border-radius.
http://www.wilbertvandersteen.nl/cmsms/test
All three area's (tags <header>, <article> and <nav>) have rounded corners, which works fine in Firefox9 and IE9.
Also Google Chrome, Safari and Opera (last versions af al these browsers) support the border-radius, but not when I display an image in the left area (<header>, where I use Gallery - Cycle template), or when a jQuery ScrollPane scrollbar is displayed in the middle area (<article>).
edit #1 - I exaggerated the radius to show what happens: the background has still rounded corners, the image / scrollbar is projected on top of that.
I'm aware that HTML5 is in development - possibly there is nothing I can do to get this right (except for old school nifty corners or so).
But maybe someone has an idea as to how to fix this, using HTML5 and CSS?

Frank

edit #2 - I nearly finished the site and removed the test page. The rounded corners and the scroll bar can still be found on the site.

[fredp]

Hi,

I just had a very quick look at your site. I'm not yet an HTML5 expert, but I did notice something about the CSS styling. It appears that the images in your #slides <div> have higher z-indexes than the #slides <div> itself. To help investigate further, you might try setting border-style: solid and position:absolute for the #slides <div>. I did this with Chrome "Inspect Element" and was able to see the border, with rounded corners, sitting underneath the images as they transitioned from one image to the next.

Hope this helps,
fredp
P.S. I'm using Chrome version 16.0.912.75.

[Dr.CSS]

The border radius has nothing to do with HTML 5 it is CSS 3 and you only have one call for it when you may need all of them...

http://multiintech.com/ just don't look at it in any IE except 9 to see radius corners...

[frankmanl]

Thanks guys, this helped.

rounded corners of images on the left
The css of my Gallery template is now

Code: Select all

#slides,
#slides img {
  width: 215px;
  height: 660px;
  border-radius: 40px;
}

jScrollPane
To style the scrollbars to rounded bars I added this line in the css of jScrollPane:

Code: Select all

.jspVerticalBar *,
.jspHorizontalBar *
{
  border-radius: 20px;  /* same as width of .jspVerticalBar and height of .jspHorizontalBar */
} 

To fit the scrollbar within the background of <article> I added

Code: Select all

.jspVerticalBar *,
.jspHorizontalBar *
{
  margin: 25px 0; /* value set by trial and error */
}
.jspTrack
{
  max-height: 610px; /* equals height of <article> minus two times margin of .jspVerticalBar */
}

Now there is still one thing that needs to be adjusted
When sliding down the (red) scrollbar, at the bottom it overflows the rounded (green) background and moves out of sight (just try to see what I mean). I see no way to keep it within the limits of the green background.
Any idea how to fix that?

Frank

I'm still working on this - colors, values of width and border-radius etc. may change

[frankmanl]

Now there is still one thing that needs to be adjusted
When sliding down the (red) scrollbar, at the bottom it overflows the rounded (green) background and moves out of sight (just try to see what I mean). I see no way to keep it within the limits of the green background.
Any idea how to fix that?

I put the <nav> tag within another <div> tag and gave it a heighth which fits in.

Code: Select all

<!-- start content -->
<div id="midden">
  <h2>{title}</h2>
<article class="scroll-pane">
  {content}
</article>
</div>
<!-- end #content -->

and

Code: Select all

#midden {
	width: 605px;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 220px;
	padding: 0;
	background: url('[[root_url]]/uploads/css/article-bg.png') repeat;
	border-radius: 13px;
}
article {
	width: 585px;
	height: 595px;
	margin: 0 10px;
	overflow: auto;
}

Frank