Forums

Trouble Rendering Circle Overlays in Chrome and Safari

Okay, got the text to display by adding a top margin of 195px to the .thumbnail .overlayer .overlay > div. I figured it was getting clipped off the top by the clip selector in .overlayer .overlay. Though I am still not clear on the difference between this selector and .overlayer .overlay.

Glad to see it start getting there. The `.overlayer .overlay > div` is the `div` that’s holds you’re pop-up description text: ‘Karen’s Salon etc. ( The greater-then-sign `>` is the child combinator selector, which makes it that it will only select ‘html-elements or divs or what have you’ that are direct children of the parent: [Chris did a great article about it](http://css-tricks.com/child-and-sibling-selectors/) . BTW: you can see/open up the div, can’t you, when you do `inspect element` in firefox’ firebug or chrome webdeveloper tools?) I see there is a issue with the calculated width and height which needs to be more than 290px, probably 302px, or 304px, now I think about, because of the padding on the `a` link element ( 2 x 6px = 12px + border 2 x 1px = 14 ), or do `box-sizing: border-box`. About the resizing, responsive thing: that’s a whole different can of worms that I might see about this weekend if I find the time to make some sort of simple [reduced test case](http://css-tricks.com/reduced-test-cases/) . Easier to get into details, and to the heart of the matter in that way. P.s. There is a typo in you’re css: `z-index: 20px` , which should be just the naked value without `px` like this: `z-index: 20` . Have a great weekend.

Thanks Atelierbram! Actually, I think I’ve got this :) Just did everything on a smaller scale for the responsive layout.

Thanks for the article…will read this weekend…I’ve never totally understood why you need the > sign in some cases.
And I fixed the typo.

As for the resizing of the larger circles to 304, I tried that but the overlays didn’t fit anymore so I set them back to 290px. However, for the smaller circles, it worked better to add the extra 14px to the overlays…go figure.

The only issue on this now is that sometimes on reload, an expanded circle background and black text flicker up before going away. Do you know how I could get rid of this?

I tried that…but the overlay didn’t fit all the way across the circle…I am now noticing that when the circles expand the overlay isn’t expanding with them. Is there some way to resize them automatically as they expand and contract?

[The hovering, clipping, and popup in this codepen I just made](http://codepen.io/atelierbram/pen/JFfac) looks promising, I think, in Chrome and Firefox, but some ‘slipping/flickering’ ( on hover ) in Safari … Any ideas?

Oh man…I’m so sorry…I should have posted on here last night to let you know that it looks like I have everything resolved on this. I removed a width of 100% on .thumbnail a, which cleared up the problem of the overlay not fitting on expansion. I feel badly that you went to all this effort. Before I try to incorporate your code here, why don’t you take a look at the site as it is now and see what you think.

The only problem I am still having is the ugly flicker you mentioned on page reload where the circle backgrounds expand and ugly black text shows up. It’s happening for me in all the browsers, not just Safari.

Thank you again! Your help has been invaluable…especially learning about the clip attribute.

@DesignLady94 : please don’t be sorry …; I’m doing this also for my own curiosity in this matter, ( something I’m eager to find an excuse for using oneday ) so congratulations, and maybe you can call this question solved! What I think of you’re homepage is that it looks good, and I mean that, but that ( parts of ) the underlying css are still vulnerable. By making this codepen I experienced how tricky this issue really is. One thing, which is odd and hard to explain, but what can be improved in you’re code is the `.thumbnail .overlayer .overlay` : ( ’cause of the padding ) the circles are just a tiny bit oval, so by compensating this in the height for this element, you will have a better fit. You can check this by temporarily disabling the `clip` property in Firebug or developer-tools:

Also noticed that, by disabling the border on the `.thumbnail a` , the layout breaks on hover; that can be a sign that the css is still not [bulletproof](http://simplebits.com/publications/bulletproof/) . And I don’t understand this `jQuery.thumbFX.css` file that you include, which says .css, but is really html. So good luck with optimizing: that’s the trouble with using other’s frameworks, plugins ( no matter how solid it is ) : there’s always some ‘dead wood’ to get rid of!

I see what you mean about the layout breaking down….not sure how to fix though. I have removed the jQuery.thumbFX.css as I took the overlay css and put it in my style sheet, so it wasn’t really needed. The latest version is now at debbierking.com.

Thank you so much for your persistence and thoroughness in your code pens…However, I am having a little problem with figuring out which is your code and which is already in Bootstrap. I don’t want to repeat the Boostrap code in my style sheet.

As for ThumbFX, I’m going to get rid of the css for that as I copied the relevant portions into my style sheet.

I tried the mobile approach and was having such a rough time of it that I went back to doing the full screen version first…I have had a really, really difficult time with this site….I needed to get up a working version so I’ve done that now…but still have several nagging issues. I have just discovered that the thumbnails section seems to be the reason for my problem with the About link…that is, when I click on it from another page, it drops down to go the bottom of the section, rather than the top.