diff --git a/app/javascript/mastodon/features/ui/components/image_loader.js b/app/javascript/mastodon/features/ui/components/image_loader.js index 5ea55d1d26f1c4b7f9e0c3f1c6b9ef2f46a71ad9..aad594380e81b60598476bcda1b97c471ea7e2e8 100644 --- a/app/javascript/mastodon/features/ui/components/image_loader.js +++ b/app/javascript/mastodon/features/ui/components/image_loader.js @@ -133,6 +133,7 @@ export default class ImageLoader extends React.PureComponent { width={width} height={height} ref={this.setCanvasRef} + style={{ opacity: loading ? 1 : 0 }} /> {!loading && ( diff --git a/app/javascript/mastodon/features/ui/components/media_modal.js b/app/javascript/mastodon/features/ui/components/media_modal.js index 769e188202861445cf94cb83855093a8722c53bc..23f588669f19a00c654aac7796f32b8897495fa6 100644 --- a/app/javascript/mastodon/features/ui/components/media_modal.js +++ b/app/javascript/mastodon/features/ui/components/media_modal.js @@ -94,7 +94,7 @@ export default class MediaModal extends ImmutablePureComponent { <div className='media-modal__content'> <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} /> - <ReactSwipeableViews onChangeIndex={this.handleSwipe} index={index}> + <ReactSwipeableViews onChangeIndex={this.handleSwipe} index={index} animateHeight> {content} </ReactSwipeableViews> </div> diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 397126ec1db061527561b0ae2d2a0892d991111c..97651b5f46d8cc53a5a40c8ec17c6c7debccce4f 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -2935,6 +2935,7 @@ button.icon-button.active i.fa-retweet { canvas { display: block; background: url('../images/void.png') repeat; + object-fit: contain; } }