Trouble Rendering Circle Overlays in Chrome and Safari

[DesignLady94]

This is a rewrite of a post from yesterday…I have created circle overlays for my thumbnails using a plugin I downloaded from ThumbFX. It renders fine in Firefox but not in Chrome and Safari.

In order to create the gray circle borders for the thumbs, I had to attach the border to the .thumbnail a link rather than the actual image, in order to get it to render correctly in Chrome and Safari. I have tried doing a similar thing for the overlays but nothing is working so far.

debbierking.com

• 
  

  Karen’s Salon

  Web Design

CSS:

.thumbnail a {
border: 1px solid #c5c5c5;
background: #d5d5d5;
display: block;
padding: 6px;
text-decoration: none;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}

.thumbnail img {
-moz-box-sizing: border-box;
height: auto;
position: relative;
width: 100%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}

.thumbnail h3, .thumbnail p {
display: none;
}

.thumbnail a:hover {
border: 1px solid #0f7a7d;
background: #118f92;
}

.overlayer .overlay {
background-color: #333;
background: none rgba(0,0,0,0.75);
z-index:99;
padding-right: 20px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}

.overlayer .overlay h3, .overlayer .overlay p {
color: #fff;
display: block;
text-align: center;
text-shadow: 0 -1px rgba(0,0,0,.7);
}

.overlayer .overlay > div {
padding: 5px 0 15px 10px;
}

.overlayer .overlay.remove-padding > div {
padding: 0;
}

[DesignLady94]

That s/b debbierking.com/bootstrap.

[Atelierbram]

.overlayer .overlay {
border-radius: 50%;
height: 100% !important;
}

[DesignLady94]

Thanks Atelierbram…It’s getting there…I need the height to be only only about 33%, but when I use that height instead, the circle flattens out in Chrome and Safari, rather than looking the way it does in Firefox (which is the way I want it to look.)

[Atelierbram]

Yeah, I see now what you’re after. That’s odd though, and in a way I don’t understand why it does work in Firefox …

[DesignLady94]

Chrome and Safari don’t render circles properly…Firefox does. Do you have any ideas? Right now I’ve lost my styling for the site so am trying to restore that….not sure why.

[Atelierbram]

I guess it has probably more to do with ( the differences in rendering by browsers of ) the stacking order of absolute and relative positioned elements, using z-index, then anything else. In [you’re case](http://debbierking.com/bootstrap/) the `a`-element with the 50% border-radius should be *above* the overlay. Well that’s what you want, but maybe the creators of this javascript didn’t have this scenario in mind … in a way also a paradox: an overlay that wants to be behind a parent. Tried to solve it with different z-indexes for the different elements, but unfortunately with no success.
[z-index property](https://css-tricks.com/almanac/properties/z/z-index/) ,
[how z-index works](https://css-tricks.com/video-screencasts/40-how-z-index-works/) ,
[demo page z-Indexing positioning](http://css-class.com/test/css/visformatting/layers/z-index.htm)

[DesignLady94]

Atelierbram…I appreciate all your efforts with this! In the end, I broke down and made a .png of the overlay image…I hated to do it…but oh well….I do hope Chrome and Safari get their act together soon to render circles properly ;o

[Atelierbram]

That’s too bad, if you ever have a change of heart you could always try this:

.thumbnail * {
/* outline: 1px dotted red */
}
.overlayer[style] {
position: absolute !important;
width: 290px !important;
height: 290px !important;
z-index: 2 !important;
border-radius: 50%;
overflow: hidden;
}
.thumbnail {
position: relative;
width: 290px;
height: 290px;
border-radius: 50%;
z-index: 99999;
overflow: hidden;
}
.thumbnail .size-auto {
width: 290px;
height: 290px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
border-radius: 50%;
}
.thumbnail .overlayer .overlay[style] {
z-index: 2;
border-radius: 50%;
width: 290px !important;
height: 290px !important;
clip: rect(133px, 290px, 290px, 0); /* you will have to edit these values */
}
.thumbnail .overlayer .overlay > div {
margin-top: 67%; /* you will have to edit this value */
}

So I changed the position values around, z-indexes, with some clipping. Note that only the combination of `[style]` with `!important` is able to override ( in the stylesheet ) the injected inline css styling in the `DOM` by javascript. I would recommend considering to drop the javascript for the hover effect all together, and instead try CSS3 (; the thing you might lose though is the ‘easing effect’, but that is in a way also gone now …). Good luck, keep it up and persevere: these are interesting problems.

[DesignLady94]

Thank you! Hate to let go of the Hover plugin since I paid $$$ for it. Will try this though. The image thing isn’t working out at all cause I can’t get it to resize on hover…will definitely try your code!

Do you know jquery? Am trying to get several bootstrap js functions to work. Are you familiar with Bootstrap?

[DesignLady94]

This looks good in Firefox but again, it isn’t rendering properly in Chrome or Safari …the thumbs come in as squares.

[DesignLady94]

I’ve gone back to my previous code and surprisingly, it is rendering properly now in Chrome, but still not in Safari. Am using this for .overlayer .overlay.

.overlayer .overlay {
background-color: #333;
text-shadow: none;
z-index:99;
}

[Atelierbram]

@DesignLady94 , one of these days, when I find some extra time, I will make a codepen to see this thing work. Here are my thoughts however: you’re `.overlayer .overlay > div` doesn’t need to have `50% border-radius` for all corners, but what’s essential here is that it has to sit *behind* you’re `.overlayer .overlay` which surely *does* have to be a ‘perfect circle’, and therefore will need to have full height and width ( here 290px), but then be clipped from the top in order to have the look that you’re after. But then also make sure to override or change the javascript to give the .thumbnail a.overlayer[style] ( which is given the `overflow:hidden` by means of injected inline css by javascript ) the position absolute instead of relative , also make sure of full widht and height (use `!important` in stylesheet after the value, and have the extra [style] attribute with the property: you’re overriding inline css here! ). Then give you’re `.thumbnail` wrapper a `position` of `relative`, and `z-index:` , we’re almost there. A last tip is to disable the history in your’re browser, flush the cache, and in Chrome webdeveloper-tools to disable the cache, if you want to stay sane as a web-designer/developer.

.thumbnail .overlayer .overlay[style] {
z-index: 99;
border-radius: 50%;
width: 290px !important;
height: 290px !important;
clip: rect(194px, 290px, 290px, 0);
/* you probably will have to edit the first value ( 194px = 2/3 from top of image which is 290px height */
}

Oh, and yes, I can work with jQuery, but am not familiar with Bootstrap js, and generally more of a frontend tweaker; just know some basic javascript, but am trying to learn more.

[DesignLady94]

Thank you…this totally works in terms of rendering the half circles in all three browsers! Was not familiar with the clipping property…will definitely have to remember that!

Btw, what exactly does .thumbnail .overlayer .overlay > div { do?

Just two things left to work out…for some reason, the text is not displaying, and I needed to resize for responsive…is there a way for the half-circles to automatically r esize? Or do I just need to make the changes for each media query? I tried setting the widths to max-width, but when I did that the overlay half-circle disappeared.

Here’s what I have:

.thumbnails {
margin: 0;
padding: 0;
}

.thumbnails > li {
margin-left: 10px;
}

.thumbnail {
border: none;
box-shadow: none;
position: relative;
z-index: 100;
}

.thumbnail a {
border: 1px solid #c5c5c5;
background: #d5d5d5;
display: block;
padding: 6px;
text-decoration: none;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}

.thumbnail img {
-moz-box-sizing: border-box;
height: auto;
position: relative;
width: 100%;
vertical-align: middle;

-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}

.thumbnail a:hover {
border: 1px solid #0f7a7d;
background: #118f92;
}

.thumbnail .overlayer .overlay {
background-color: rgba(0,0,0,0.7);
z-index: 99;
border-radius: 50%;
width: 290px !important;
height: 290px !important;
clip: rect(194px, 290px, 290px, 0);
}

.thumbnail .overlayer .overlay > div {
padding: 5px 0 15px 10px;
z-index: 20px;
}

.thumbnail .overlayer .overlay h3, .overlayer .overlay p {
color: #fff;
display: block;
text-align: center;
text-shadow: 0 -1px rgba(0,0,0,.7);
}

.thumbnail .overlayer .overlay.remove-padding > div {
padding: 0;
}

.thumbnail .overlayer .overlay h3 {
font: normal 24px ‘Museo300Regular’, Arial, sans-serif;
margin-bottom: 0;
}

.thumbnail .overlayer .overlay p {
font-size: 14px;
}

[DesignLady94]

Actually, the text does show up in black for just a moment and then disappears..It should be in white.

[Author]

Posts