CODEWITHSUNDEEP
javascriptreactjsresize
Yoskutik
Yoskutik

Reputation: 2079

ReactJS. Images disappear on window resize

Here's the files:

script.jsx: (the main script)

document.addEventListener('DOMContentLoaded', () => {
    ReactDom.render(
        <Body>
            <Collage />
        </Body>,
        document.querySelector('#body'),
    );
});

body.jsx:

const Body = function (props) {
    return (
        <>
            {props.children}
        </>
    );
};

export default Body;

collage.jsx:

export default class Collage extends React.Component {
    constructor() {
        super();
        this.state = {
            images: [
                { src: '/home/photos/vertical/1' },
                { src: '/home/photos/vertical/0' },
            ],
        };
    }

    render() {
        return (
            <div className="collage">
                {this.state.images.map(image => <Image src={image.src} key={Math.random()} />)}
            </div>
        );
    }

image.jsx:

const Image = ({ src, alt }) => (
    <img className="collage__img"
         alt={alt}
         src={`${src}.jpg`}
         onTransitionEnd={evt => evt.target.remove()} />
);

Image.propTypes = {
    src: PropTypes.string.isRequired,
    alt: PropTypes.string,
};

Image.defaultProps = {
    alt: '',
};

export default Image;

So, script.jsx should render Body and Collage components. All that Body does is just returns it's children. The Collage consists of one div with a list of Image. And images' data stored in Collage state. The Image is just an img.

When the page is loaded everything works fine. But when the I'm resizing the window, the images are disappearing for some reason.

If you want to see, how the images are disapearing, there's a video.

This behaviour seems to be broken. I think this may be a bug. But I want to someone who understands React say so. If it's not, please, describe it.

The code above may looks strange, but this is just a minimal reproducible example. I can also share the full code. Here's the repository

Upvotes: 0

Views: 1019

Answers (1)

Dmitry
Dmitry

Reputation: 921

The images indeed disappear because they are removed in onTransitionEnd={evt => evt.target.remove()}, as @tanmay says. As I understand it is intentional and supposed to happen on mobile screen-sizes on opacity transition here

Now, why would that happen on resize. Because there's another transition, of font-size, that happens on html element here. And font-size is an inherited property so it changes for images and every element under html.

What to do to avoid it but leave removalon transition in place. Three ways:

  1. Check for property name onTransitionEnd={evt => evt.propertyName === 'opacity' && evt.target.remove()}
  2. Explicitly set what properties to transition with .collage__img {transition-property: opacity;}
  3. Make font-size not inherit with .collage__img {font-size: initial;}

I'd go with option 2. Certainly not option 3, as that only accounts for font-size transition and leaves onTransitionEnd to trigger on any other transition that may be added in the future.

Upvotes: 1

Related Questions