Clearing Bug: image shifts to bottom

[tikot]

Sometimes this happens. I have looked into this to find what is the cause, but no luck yet. Maybe someone has an idea.

[jessedmatlock]

Having the same issue.. usually only on the first opening of the Clearing image.. then Left or Right arrows reset the image to center. After a little inspection it looks like the JS applied inline margins are incorrect on that image.

eg. when I view generated source, I can see that the inline styling applied to the image is:

<img style="visibility: visible; margin-left: -0.5px; margin-top: -0.5px;" src="images/image.jpg" alt="">

However, when I view that same image, after it has been properly aligned in the center (either by clicking a Left/Right arrow, etc.) I can see the that the inline style (the correct one) is:

<img style="visibility: visible; margin-left: -437.5px; margin-top: -341.5px;" src="images/image.jpg" alt="">

So the calculation of the margin offsets are where things are going wrong

[wdspkr]

This is happening consistently in Safari 7.0.1 on the doc page for clearing: http://foundation.zurb.com/docs/components/clearing.html

[ghost]

I can confirm this happening in Firefox 27 on Foundation doc page and also in my own projects. JS injected styles are wrongly calculated (margin-left: -0.5px; margin-top: -0.5px;) as @revivemarketing posted.

There is also a forum thread http://foundation.zurb.com/forum/posts/1720-clearing--first-image-not-center with no solution.

[doertedev]

Dirtiest fix I ever wrote was for this issue:

      $(function(){
          var runtime  = 1000;
          var interval = 100;
          var timer    = null;

          resize = function(){
              timer = setInterval("Foundation.libs.clearing.resize()", interval);
          }
          setTimer = function(){
              setTimeout("clearTimer", runtime);
          }

          clearTimer = function(){
              window.clearInterval(timer);
          }
          $('.clearing-thumbs li a').on('click', function(){
              resize();
              setTimer();
          });
      });

[rafibomb]

To replicate
Firefox or Safari
go to http://foundation.zurb.com/docs/components/clearing.html
hit first clearing thumb

[weshouldfight]

I have the same issue with Foundation 5 in Firefox on Mac and Windows. Didn't happen in version 4.

[thedeerchild]

This is an issue with Foundation.utils.image_loaded (located here). I'm not sure exactly why it's not working in some browsers, but I'll dig into it for 5.3.

[thedeerchild]

Possibly fixed by 52599b3?

[artursopelnik]

@thedeerchild The bug is not resolved. Could you reopen this issue?

[tikot]

I think this is something to do how browsers render CSS. W3 says, "Negative values for margin properties are allowed, but there may be implementation-specific limits."

This is something to do when the image loads and when the CSS properties is added to the image.

It's very rare bug since 5.3, it's hard to replicate it.

[Baedda]

Hey @tikot. This bug is not hard to replicate for me. I have got this issue constantly with Firefox 31.0 and Foundation 5.4.3. I´ve got no extra styling applied to clearing. Just Foundation styles only and the bug happens every first time i open clearing.
I think its not a CSS problem. The negative margin-left and -top applied via JavaScript is just incorrect. For me it seems that the -(target.outerWidth() / 2) is calculated too fast. Cause clicking to the next image and back to the first image updates this two values and the image is positioned correctly with bigger values. Maybe the calculations need to be done in a .load() callback or something? I will just try some research next week. But in my opinion this issue needs to be reopened.

[oller]

Agree with @Baedda, this is still present in 5.4.7 and definitely seems the problem that the top and left margins are calculated too soon, against a 1 x 1px image (resulting in the -0.5px values).

Any window resize triggers a recalculation and fixes the centering.

Are we able to swap this calculation out and just rely on a css vertical/horizontal centering technique, seeing as Foundation 5 doesn't support IE8 anyway?

[doertedev]

@oller: Tripple 👍 on the last one!!!

[tikot]

Okay, it looks like I should fix this issue. Holidays are coming I will have some free time to look for a solution.

[Baedda]

@rafibomb will there be a push to bower-foundation so we can have a benefit from tikots fix, too?

[versedi]

+1

I've tried to make same changes to files but ended up with Chrome having same bug like FF did earlier - just the image went to opposite corner.

[tikot]

@versedi just include this commit