Centering not picked up

[tliebig]

Hey Louis,

great to see someone taking care of IEs lacking support for some of CSS' more helpful options. I'm employing the script here:

http://beta.insachenkunst.de/kuenstler/tom-schulhauser/

and although it resizes the image fine, it fails to correctly center the image. Any idea as to why that might happen?

[louisremi]

Hi, for some reason my script throws an error in IE on page load. Could you try loading the development version of the script instead of the minified one to help me investigate? Thanks.

[tliebig]

Sure. I have updated the page to load the development version. The error occurs on line 308, at $(window).on as far as I can see.

[louisremi]

This error is due to the fact that you're using an old version of jQuery. The "on" method has been introduced in jQuery 1.7

That doesn't explain why your images aren't centered. I'm still
investigating.

[louisremi]

Are you initializing your element with a background size? $(elem).css( "background-size", "cover" );

[tliebig]

I believe I am. There's both javascript code that adds the css directly to the element as well as a rule for the class that contains "background-size: cover":

from http://beta.insachenkunst.de/wordpress/wp-content/themes/insachenkunst/js/artist-gallery.js line 10:

element.style {
    background-image: url("http://beta.insachenkunst.de/wordpress/wp-content/uploads/Schulhauser-4-Postpanoptisches-Lächeln-4-mittel.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

and http://beta.insachenkunst.de/wordpress/wp-content/themes/insachenkunst/page-kuenstler-einzelansicht.css line 19

.gallery .gallery-large-thumb {
    background-position: center center;
    background-size: contain;
    border: medium none;
    display: block;
    height: 339px;
    margin-bottom: 13px;
    width: 552px;
}

[tliebig]

Just an update: jQuery was previously loaded as version 1.4.4 from Google CDN, causing unmet requirements. I have just updated jQuery to version 1.8.1, but I am still getting the $(window).on error from IE8.

[tliebig]

Hey Louis,

any chance that you can look at the issue? The $(window).on error is gone, but the image still sticks to the left inside the container instead of being centered.

I can see that elements created by jQuery, and they all seem to have the correct size, but since the image is positioned absolute and left: 0, the centering does not occur correctly. I believe the code would have to be updated to calculated the correct value for left, but to be honest I'm lost at where to do so.

You could probably identify and rectify the cause with a glance. Would you mind taking a look at this again?

[graygilmore]

I just ran into this same issue myself. It's being caused by a naughty max-width: 100%; that's occurring elsewhere in your CSS file. In your case, I have a feeling it's this:

.gallery .post img {
    max-width: 100%;
}

Remove that on the elements that you want to use the script on and you should be golden.

[tliebig]

Unfortunately, it did not work for me. I have disabled the max-width: 100% rule at style.css line 148, but the behaviour hasn't changed.

Neither

#content .post img {
    /* max-width: 100%; */
    height: auto;
}

nor

#content .post img {
    /* max-width: 100%; */
    /* height: auto; */
}

helped. Anything else I could try?

[elevente]

I have the same problem, on some window sizes its perfect, but sometimes the image is not centered, sometimes it's even completely outside of the viewing area. Anyone found a solution to this? I don't have max-width anywhere in my CSS, so that didn't solve my problem :(

[graygilmore]

@tliebig if you have a test page up where you're experiencing the issue, I can have a quick look.

[tliebig]

Yes, sure. Right here: http://www.insachenkunst.de/kuenstler/tom-schulhauser/ it's where it failing to center on IE8. Thanks for taking the time, I appreciate it!

[graygilmore]

Aaahhh, I see you're using contain and not cover - I'm not sure if the whole max-width thing solves that same issue. I had a quick look and couldn't really see anything. Maybe @louisremi could have a super quick look.

[cabdesigns]

tliebig - I think this is a jQuery version issue. I too was using 1.8.1, and was having problems with centre alignment in IE8 after resize. I changed my jQuery version to 1.7.0 and hey presto, it's fixed. So may be give that a try if you're still looking for a solution.

Ultimately, it appears that there is something in the new version of jQuery that is causing this issue.

[louisremi]

I'd love to have a confirmation of the solution proposed by @cabdesigns I'm not gonna be able to verify it myself immediatly.

[cabdesigns]

@louisremi I'm not exactly sure where the issue lies, but I know that by reverting my jQuery version it appears to have resolved the problem. I'll try dig deeper and see if I can pin point exactly what the actual problem is; I'll report back if I can find out any more information.

[tliebig]

Sorry - just reverted to jQuery 1.7.2 and it's still not centering: http://www.insachenkunst.de/kuenstler/tom-schulhauser/. If there's any other stuff i can try out for you to zero in on the problem, I'll be more than glad to help you out!

[graygilmore]

@tliebig - @cabdesigns said he reverted to 1.7.0, did you try going down that far?

[tliebig]

Going to to 1.7.0 results in the following error for IE8:

Unable to get property 'width' of undefined or null reference
jQuery.backgroundSize.js, line 184 character 3

Maybe someone more JS-profilic than me can interpret that error?

[louisremi]

@tliebig I think this problem occurs when a background image is unreachable (you have an error in the URL).

I don't have time to fix the different problem with this script because I'm working on an IE behavior (.htc) that doesn't depend on jQuery and can be activated using CSS only. I hope to have it ready for beta-testing today and I could use some help from all of you.

[louisremi]

Alright, the update to jquery.backgroundSize.js is coming: background-size-polyfill is now in public alpha! This thing might fix your problems, so give it a try and tell me what happened.

I'll only have time to write a proper README next week, but the instructions are rather simple: once you have uploaded the appropriate files on your server, when you write background-size: cover; or background-size: contain in your CSS, add the following rule for IE8: -ms-behavior: url(/backgroundsize.min.htc); and that's it! No jQuery dependency, no javascript initialization, you can add elements dynamically to your page and the background-size will apply.

I've put together a small demo here: http://louisremi.github.com/background-size-polyfill/

The major regression compared to jquery.backgroundSize.js is that IE6 and IE7 aren't supported. Adding support for those browsers should be relatively straightforward, I'm simply not willing to put any efforts into it. Performances of this alpha may also be inferior to the jQuery version. Please report any regression (feature or performances) that you find in the alpha (in the issue tracker of the new project, of course).

Thanks for your patience and help.