Broken in Safari with an iframe

[ayush]

Thanks much for Readmore.js! It works great but we noticed a problem. If there is an iframe inside a div, then Readmore.js does not display the contents of iframe on Safari. On other browsers (Chrome/Firefox) it works fine. On OSX or iOS Safari the iframe contents are not rendered.

Any idea what might be causing this behavior?

Plunker which shows the problem

I have a plunker which demonstrates this problem: http://plnkr.co/edit/SCr7jmwmxQYrsTfDvsIY?p=preview

On Safari you see:

On Chrome/Firefox you see:

[jedfoster]

Not a Readmore.js issue.

[ayush]

Hi @jedfoster why isn't this a Readmore.js issue? My plunker clearly gives you a sandbox to reproduce it.

[ayush]

Hi @jedfoster I'd appreciate if you could give some more details about why you think this isn't a Readmore.js issue. I'd carefully created a plunker so that you'd be able to reproduce the problem.

[krisdigital]

Had the same problem, it has something to do with the script cloning dom elements as far as I can see. Wrote a tiny script that is enough for my readmore needs, is very small and is tuned for performance.

https://github.com/krisdigital/readmore-light-js

[jedfoster]

@krisdigital I'm curious if your issue is exactly the same as @ayush's? Do you have a page that shows the issue?

(BTW, I love that you linked to sassmeister.com!)

[jedfoster]

FWIW, I found that resetting the iframe's source at the end of setBoxHeights ""fixes"" the issue. See: http://plnkr.co/edit/tT30vAOyaHr40sHrafBL?p=preview

I say ""fixes"" because it feels hacky.

The ""fix"" is:

  function setBoxHeights(element) {
    //...

    element.find('iframe').each(function() {this.src = this.src;});
  }

Removing the cloned node seems to unload the iframe; calling hide() instead of remove() on line 86 also ""fixes"" the issue (can't leave those cloned nodes laying around.)

I still don't think this is an issue with anything in Readmore.js, it is a Safari issue. Admittedly, cloning, sizing, removing, and then resizing nodes is not a common operation (or at least, it shouldn't be :-), but I believe this to be a rare corner-case issue with this one browser.

Readmore.js was intended to work with text, not arbitrary HTML blocks. I am disinclined to include this ""fix"" in Readmore.js at this time.

[krisdigital]

Hi @jedfoster,

I did not know that sassmeister.com is your site! LOL, you are everywhere!

Yes I am pretty sure I had the same issue as @ayush and it was only in Safari and not always, but most of the time.

I just posted my solution as it might help others with the same problem. It is a different approach and it works well in my case.

I do not have a page with the issue online anymore..

Cheers!