MM-16029 IE11: image attachments aren't displayed

components/__snapshots__/size_aware_image.test.jsx.snap

@@ -38,7 +38,11 @@ exports[`components/SizeAwareImage should render a placeholder and has loader wh
  src="https://example.com/image.png"
  style={
  Object {
- "display": "none",
+ "height": 1,
+ "position": "absolute",
+ "top": 0,
+ "visibility": "hidden",
+ "width": 1,
  }
  }
  />

components/size_aware_image.jsx

@@ -103,7 +103,7 @@ export default class SizeAwareImage extends React.PureComponent {
  } = this.props;
 
  let placeHolder;
- const shouldShowImg = !dimensions || this.state.loaded;
+ let imageStyleChangesOnLoad = {};
 
  if (dimensions && dimensions.width && !this.state.loaded) {
  placeHolder = (
@@ -120,6 +120,10 @@ export default class SizeAwareImage extends React.PureComponent {
  Reflect.deleteProperty(props, 'onImageLoaded');
  Reflect.deleteProperty(props, 'onImageLoadFail');
 
+ if (!this.state.loaded && dimensions) {
+ imageStyleChangesOnLoad = {position: 'absolute', top: 0, height: 1, width: 1, visibility: 'hidden'};
+ }
+
  return (
  <React.Fragment>
  {placeHolder}
@@ -129,7 +133,7 @@ export default class SizeAwareImage extends React.PureComponent {
  src={src}
  onLoad={this.handleLoad}
  onError={this.handleError}
- style={{display: shouldShowImg ? 'initial' : 'none'}}
+ style={imageStyleChangesOnLoad}
  />
  </React.Fragment>
  );

components/size_aware_image.test.jsx

@@ -24,13 +24,14 @@ describe('components/SizeAwareImage', () => {
 
  loadImage.mockReturnValue(() => ({}));
 
- test('should render an svg when first mounted with dimensions and img display set to none', () => {
+ test('should render an svg when first mounted with dimensions and img display set to position absolute', () => {
  const wrapper = mount(<SizeAwareImage {...baseProps}/>);
 
  const viewBox = wrapper.find('svg').prop('viewBox');
  expect(viewBox).toEqual('0 0 300 200');
  const style = wrapper.find('img').prop('style');
- expect(style).toHaveProperty('display', 'none');
+ expect(style).toHaveProperty('position', 'absolute');
+ expect(style).toHaveProperty('visibility', 'hidden');
  });
 
  test('should render a placeholder and has loader when showLoader is true', () => {
@@ -44,12 +45,12 @@ describe('components/SizeAwareImage', () => {
  expect(wrapper).toMatchSnapshot();
  });
 
- test('should have display set to initial in loaded state', () => {
+ test('should not have position absolute on image in loaded state', () => {
  const wrapper = mount(<SizeAwareImage {...baseProps}/>);
  wrapper.setState({loaded: true, error: false});
 
  const style = wrapper.find('img').prop('style');
- expect(style).toHaveProperty('display', 'initial');
+ expect(style).not.toHaveProperty('position', 'absolute');
  });
 
  test('should render the actual image when first mounted without dimensions', () => {

sass/layout/_markdown.scss

@@ -60,7 +60,8 @@ h6 {
  div.markdown-inline-img {
  vertical-align: middle;
  display: inline-block;
- width: inherit;
+ width: 100%;
+ width: fill-available;
  }
 }