Grow your CSS skills. Land your dream job.

Trouble Rendering Circle Overlays in Chrome and Safari

  • # January 11, 2013 at 12:49 pm

    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.

    Still need to figure out resizing.

    # January 11, 2013 at 8:53 pm

    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.

    # January 11, 2013 at 9:47 pm

    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?

    # January 11, 2013 at 10:36 pm

    I think that setting the width of the larger circles’ overlay ( .thumbnail .overlayer .overlay ) to 300px will work, if you also set the clip to match ( rect(194px, 300px, 290px, 0) ).

    This looks right to me in Chrome and Firefox.

    # January 11, 2013 at 11:54 pm

    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?

    # January 11, 2013 at 11:57 pm

    I should say that I’ve already tried max-widths and auto widths but those don’t work.

    # January 12, 2013 at 2:54 pm

    [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?

    # January 12, 2013 at 3:45 pm

    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.

    # January 12, 2013 at 5:54 pm

    @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:

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

    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!

    # January 12, 2013 at 6:54 pm

    I’ll try these things..thanks! Hopefully they will take care of that awful flicker.

    # January 12, 2013 at 7:06 pm

    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.

    # January 13, 2013 at 12:06 pm

    [Made this new codepen of the clipped overlay on hover for images](http://codepen.io/atelierbram/pen/CriFb) this time with css transitions , ‘triggered by’ a few lines of jQuery on hover. This one’s the most solid so far.

    # January 13, 2013 at 7:10 pm

    [So this will be the third and last codepen of clipped overlay on hover for images](http://codepen.io/atelierbram/pen/Icylk) It’s simply a combination of the two others, and only to be used if you like to experience javascript and css fighting The Ultimate Battle of Specificity. Which is bad, while it works … although it is a improvement over the [first one I made](http://codepen.io/atelierbram/pen/JFfac) but would recommend anyone to use [the one above with css transitions and lightweight inline jQuery]( http://codepen.io/atelierbram/details/CriFb) : it’s much cleaner and far more lightweight (and no more need to override inline css in the stylesheet by putting `!important` and `[style]` in there ). @DesignLady94 : please note that I had to do some tweaking of the layout in the css. Which is both good and bad news for you at the same time. Good news first: the slipping+flickering is no more. Has to do with lots of things, but one of the things I had to remove was the padding on the `thumbnail` wrapper. It gives unnecessary complications. But since the padding was there for reasons of giving some space between the pictures, I had to come up with something else, which was larger margins on the grid-unit-floats: `span4`. And after that the `.container` with had to be adapted with a few pixels more and/or less ( and in the media-queries ). Lastly I also put in an extra media-query with `(min-width: 980px)` , to be able to go with the mobile first approach. So keep that in mind if you would use the [lean and mean variation above](http://codepen.io/atelierbram/details/CriFb) : not all compatible right now with what you have in bootstrap.css, but can of course be adapted. I would like to add that this latest codepen variation, I also strongly discourage for you, at least for you’re homepage, it’s best to go with the one above and drop the ThumbFx.

    # January 13, 2013 at 7:24 pm

    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.

    # January 13, 2013 at 8:03 pm

    Speaking for myself, I would do the following: use the codepen as a template, just locally on the server on you’re computer (localhost ~/) and copy the styles and markup on top of that: build it up again one line at the time, in some new html and css files that you make in a folder within you’re ~/Sites folder. And yes be aware of repeated code, I didn’t want to say but I did see some of it around in you’re css. Ultimately comes from bad habits, copying and pasting snippets of code around and then forgetting about removing the repeats, which I also suffer from sometimes. If one takes the mobile first aproach however, you’re life becomes easier, because you don’t have to repeat and override so much in the media-queries.

Viewing 15 posts - 16 through 30 (of 31 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".