Изображения не видны до тех пор, пока они не появятся на мобильном телефоне - PullRequest
Новая
       18

Изображения не видны до тех пор, пока они не появятся на мобильном телефоне

0 голосов
/ 27 марта 2020

У меня странная ошибка, из-за которой некоторые изображения на моем веб-сайте не отображаются, пока не будет нажата кнопка, на которой они включены. Я сопоставил сборки P C с компонентами Preset внутри компонента PresetContainer.

Это ТОЛЬКО происходит на мобильных устройствах. Я могу подтвердить, что это происходит как в Safari, так и в приложении Chrome (на каждом телефоне, который я пробовал), но ничего подобного в инструментах Chrome dev при переключении панели инструментов устройства не отображается.

Вот запись экрана с моего телефона об ошибке: https://www.youtube.com/watch?v=GyLZk58zeN0&feature=youtu.be

Если вы хотите увидеть живую версию: https://fleetpc.org

PresetContainer: 

.presets-container {
    height: 100%;
    margin: 0 3%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: rgb(34, 34, 34);
    padding: 3rem 0;
    border-radius: 12px;
}


const PresetsContainer = (props) => {
return (
    <div className="presets">
        <div>
            <div className="presets-container">
                {Builds.map((build) => {
                    return (
                        <Fragment key={build.title}>
                            <Preset
                                title={build.title}
                                img={build.img}
                                subtitle={build.subtitle}
                                key={build.title}
                            />
                        </Fragment>
                    );
                })}
            </div>
        </div>
    </div>
);
};

export default PresetsContainer;

Preset: 

.preset {
    flex: 0 0 20%;
    margin: 1.5rem;
    border-radius: 4px;
    position: relative;
    transition: 0.3s;

&:hover {
    //!important to override materialize-css color class
    background-color: #303030 !important;
}

&-title {
    text-align: center;
    font-family: "Chakra Petch", sans-serif;
    font-weight: 400;
    font-size: 3rem;
}

&-subtitle {
    font-size: 1.5rem;
}

&-img {
    width: 20rem;
    height: 100%;

    &-container {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5%;
    }
}

&-blur {
    transition: 0.3s;
}

&:hover &-blur {
    filter: blur(3px);
}

&-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14rem;
    opacity: 0;
    transition: 0.3s;
}

&:hover &-btn {
    opacity: 1;
}
}

Данные отображаются из реквизита, переданного из PresetContainer 

const Preset = (props) => {
return (
    <div className="preset card-panel grey darken-3 z-depth-3">
        <div className="preset-blur">
            <div className="preset-img-container">
                <img className="preset-img" src={props.img} alt="" />
            </div>
            <p className="preset-title white-text">{props.title}</p>
            <p className="preset-subtitle grey-text center">
                {props.subtitle}
            </p>
        </div>
        <a
            href={`/${props.title}`}
            className="preset-btn btn white black-text waves-effect">
            View
        </a>
    </div>
);
};

export default Preset;
...