Odd div overflow in Chrome

Question

For some reason, only in Chrome, when you refresh this portfolio page the thumbnails break and move down into the footer.

The only way I can replicate it is by refreshing the page.

Very weird.. could it be a JS issue?

score 2 · Answer 1 · answered Jun 27 '12 at 02:34

2

It looks like you are applying a height to the article elements inside #portfolio.

My guess is the 'equal height' code you've got going is running too early before the images have loaded so your aren't getting accurate heights.

Try making sure the page is ready (images loaded, dom ready, etc..) before implementing the equal height bit.

Hope this helps.

answered Jun 27 '12 at 02:34

brains911

This bit? `
` That's a function or something injecting that. I'll have to look for it and see where its coming from. I could be wrong, but I say that because once it breaks, it changes to 87px.
– BaltimoreDrew Jun 27 '12 at 02:41
Yes. I noticed the height was changing from reload to reload. Look at portfolio.js around line 84. – brains911 Jun 27 '12 at 02:43
I suspect this is the correct answer. Here's a related answer: http://stackoverflow.com/questions/7669567/chrome-safari-image-loader-first-time-opening/7669602#7669602. Also: http://stackoverflow.com/questions/10709557/chrome-change-style-after-refresh-and-corrects-it-when-i-right-click-to-inspect/10709790#10709790 – thirtydot Jun 27 '12 at 02:56

score 0 · Answer 2 · answered Jun 27 '12 at 02:37

0

First thing that stood out as odd was this piece of html at the bottom? of the page:

<style type="text/css" class="fluid-images">img{max-width:100%;height:auto;}</style>

There is no class attribute for a style tag, and all of your styling should go at the top of your document.

It may also have something to do with this:

.fix::before, .fix::after, .col-full::before, .col-full::after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}

The above code is obviously a css hack, but I don't recognize it or its purpose.

answered Jun 27 '12 at 02:37

SuperMykEl

That's a plugin.. not sure why it embeds it's CSS at the bottom of the page like that. That's weird, thanks for the catch. Never noticed it. Looking at the .fix now. – BaltimoreDrew Jun 27 '12 at 02:51
That CSS rule is obviously just a [clearfix](http://nicolasgallagher.com/micro-clearfix-hack/). Nothing to see there. – thirtydot Jun 27 '12 at 02:54
It was WP Fluid Images plugin causing the issue. I think moving it to the top isn't going to fix it though. It's a bit of a qwirky plugin and I've noticed some issues. – BaltimoreDrew Jun 27 '12 at 02:54
I thought might be a clearfix too, but i have never seen a hack like that, with double colons. – SuperMykEl Jun 27 '12 at 03:24

2 Answers2