Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Isotope on Firefox Not Working (Chrome OK)

Isotope is working as expected at http://lw1.jmaddington.com/~healy/index.php?id=3 in Chrome and IE11 on Windows 8.1. However, on FF29 the main container shows up empty.

I think the issue is with the CSS but not sure. I can provide the SCSS file or you can work in the CSS output.

User Gravatar

jmaddington

Posted Jun 4 2014 18:17 UTC

$50


  • Assigned To renekorss
  • Solved
  • isotope
  • 1477 Views

9 Replies


Hi @jmaddignton; Inspecting on Firefox the issue seems to be caused by the universal box-sizing css you have in place within the hh2.css:

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Stripping this within the downloaded test version I grabbed corrects the issue for me, although may create box model problems with your website.

Try stripping it first to see if that's the case and if it breaks the box model for other portions of the page you can follow that piece of css with the following which reverts to the default for all elements within your isotope segment:

#amenities *,
#amenities *:before,
#amenities *:after {
   -moz-box-sizing: content-box;
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
}

Hope that helps you there, Cheers

User Gravatar

nightbook2333

Posted Jun 4 2014 18:54 UTC

I don't really want to replace the sizing model on the entire site. The second set you suggested doesn't seem to help.

The change is live, see line 2647

User Gravatar

jmaddington

Posted Jun 4 2014 19:41 UTC

Add width to isotope container and it will work just fine. Tested on FF 29.0.1.

#isotopeContainer
{
    width: 100%;
}
User Gravatar

renekorss

Posted Jun 4 2014 22:50 UTC

Solution

This didn't solve your task? Get your own custom solution.

@renekorss That fix it, why? In the inspector it showed as having width before that.

User Gravatar

jmaddington

Posted Jun 5 2014 3:32 UTC

@jmaddington

Actually it didn't have width before. If you remove width right now, you can see that inspector shows #isotopeContainer as it is on right side of #amenities.

If #isotopeContainer has width, element tooltip would be center of element. It is caused by #isotopeContainer style position: relative;

It seems that FF has problems with relatively positioned element what are in relatively positioned element. Another solution would be do remove position style from #isotopeContainer.

User Gravatar

renekorss

Posted Jun 5 2014 3:55 UTC

Could you accept my answer?

User Gravatar

renekorss

Posted Jun 5 2014 5:19 UTC

I'm sorry, didn't mean to check my own. Looks like I can't change, I contacted support.

User Gravatar

jmaddington

Posted Jun 5 2014 5:23 UTC

Thank you.

User Gravatar

renekorss

Posted Jun 5 2014 5:47 UTC

@renekorss Looks like they fixed it, thanks for your help!

User Gravatar

jmaddington

Posted Jun 5 2014 5:54 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions