Better rendering of images with transparency.

Hide opaque background layers for images once the image has loaded. Fixes Flipboard#16.

Author: Michael Johnston

lib/Image.js

@@ -76,13 +76,21 @@ var Image = React.createClass({
  render: function () {
  var rawImage;
  var imageStyle = assign({}, this.props.style);
+ var style = assign({}, this.props.style);
+ var backgroundStyle = assign({}, this.props.style);
  var useBackingStore = this.state.loaded ? this.props.useBackingStore : false;
 
  // Hide the image until loaded.
  imageStyle.alpha = this.state.imageAlpha;
 
+ // Hide opaque background if image loaded so that images with transparent
+ // do not render on top of solid color.
+ style.backgroundColor = imageStyle.backgroundColor = null;
+ backgroundStyle.alpha = clamp(1 - this.state.imageAlpha, 0, 1);
+
  return (
- React.createElement(Group, {ref: 'main', style: this.props.style},
+ React.createElement(Group, {ref: 'main', style: style},
+ React.createElement(Layer, {ref: 'background', style: backgroundStyle}),
  React.createElement(RawImage, {ref: 'image', src: this.props.src, style: imageStyle, useBackingStore: useBackingStore})
  )
  );