displayed svg image is lo-res, kicks up to high res on arbitrary resize

[kshahkshah]

I was using the just merged branch.

For a decent resolution photo my thumbnails were generated, however the displayed image was very lo-res. I'm afraid I'm still learning how responsive images (and picturefill) work so I can't really offer too much more diagnostics but I'll be happy to provide details.

Any arbitrary resize of my browser window, even a single pixel up or down kicked it to an appropriate image resolution. Any ideas?

[kshahkshah]

Chrome 39 / OSX Yosemite

[jagthedrummer]

Can you post a demo page and/or your code somewhere that I can see it?

[kshahkshah]

Yes, I just ripped it out, putting it back in right now

[kshahkshah]

Example here in a built site:

http://kunalashah.com/blog/2012/09/28/lorca-dicorcia.html

When I resize in my browser, it kicks up to a proper resolution

[kshahkshah]

Looks different in Firefox, looks different in Safari. Best in Safari, cubic in Firefox... I suppose this is just a reflection of the implementations in the browser then? Not sure why Chrome is kicking down so low though

[kshahkshah]

Chrome, after resize:

Chrome, before resize:

Firefox before/after:

Safari before/after:

[kshahkshah]

I also added a higher breakpoint and it got even worse on Chrome (haha)

  :sizes => {
    :small => 320,
    :medium => 480,
    :large => 640,
    :huge => 940
  },

I feel like I'm missing something obvious here, sorry for spamming this thread, just want to get all my information out there.

[jagthedrummer]

No problem. Thanks for all the info.

I'm seeing the same thing on your site, but I know that it can work, because I don't see that problem on my site. http://www.greenhousephotogallery.com/

My first guess is that somehow, when the page first loads, the svg is being rendered at a small size, and then being sized up. I wonder if setting width:100% on the parent of the SVG (or maybe further up-DOM) would do the trick.

[kshahkshah]

Going to test that locally right now, sound theory

[kshahkshah]

I bundle open'ed your gem, made the edit to the SVG_TEMPLATE constant to add width='100%' to no avail. It's tricky of course playing with this in Chrome tools since adding that prop causes it to work, but that's because of the reflow.

[jagthedrummer]

You might try it locally without loading any of your CSS, just to see if it works correctly on a bare page.

[kshahkshah]

I'm convinced it's an order issue. But this isn't javascript acting on a page that hasn't fully rendered yet so I find it bizarre. I disabled all CSS and JS and I still get this behaviour.

I say convinced because every 6th or 7th reload or so the page renders correctly.

[kshahkshah]

Going to make another pass at this in a little bit, but I'm wondering if this is what picturefill was designed to fix. I don't know enough about this specific and clearly changing problem however

[jagthedrummer]

Ok, it's definitely related to the object being resized after first render. I saved a copy of your page locally, and it works as expected if I add this to the bottom of the header.

    <style type="text/css" media="all">
      object{ width:100%; }
    </style>

I'm guessing that I must have something in the reset/normalize rules that I'm using that does that for me. I'll do some experimenting and see if I can have the gem handle this directly in the markup.

Try adding that rule to your CSS and let me know how it goes.

[kshahkshah]

Whiz bang boom:

http://kunalashah.com/blog/2012/09/28/lorca-dicorcia.html

Works. I added that rule to the wrong elements when I opened up the gem I suppose.

A serious thank you @jagthedrummer for spending the time on this.

I'm adding a few features to my build (middleman-guard) and a shoddily written gem I'm working on (email-parser-to-blog-entry) that will leverage yours when it's complete to handle attachments, so I'm psyched this part of the puzzle is working for me.