Мигающий режим смешивания в режиме смешивания - PullRequest
Новая
       72

Мигающий режим смешивания в режиме смешивания

1 голос
/ 03 марта 2020

Я сталкиваюсь с "мигающей проблемой" с одним элементом с mix-blend-mode proprety. Я работаю над проектом reactjs с s css и gsap.

Вот код структуры. 

<section className = "section__container">
                <div className="section__figure">
                        <div className="section__figure__title__outer">
                            <div className="section__figure__title__inner">
                                <h2 className="section__figure__title fill">
                                    <div className="section__figure__title__line-1">
                                        <span>d</span>
                                        <span>e</span>
                                        <span>s</span>
                                    </div>
                                    <div className="section__figure__title__line-2">
                                        <span>i</span>
                                        <span>g</span>
                                        <span>n</span>
                                    </div>
                                    <div className="section__figure__title__line-3">
                                        <span>e</span>
                                        <span>r</span>
                                </div>
                            </h2>
                                <h2 className="section__figure__title nofill">
                            <div className="section__figure__title__line-1">
                                <span>d</span>
                                <span>e</span>
                                <span>s</span>
                            </div>
                            <div className="section__figure__title__line-2">
                                <span>i</span>
                                <span>g</span>
                                <span>n</span>
                            </div>
                            <div className="section__figure__title__line-3">
                                <span>e</span>
                                <span>r</span>
                            </div>
                        </h2>

                            </div>
                        </div>
                        <figure className="section__figure__img">
                            <img src={Profil} alt="Avatar"/>
                        </figure>
                    </div>

Вот код S CSS 

    .section {
    &__figure {
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;


        @media #{$medium-up} {
            width: 50%;
            text-align: right;
        }

        &__inner {


            @media #{$medium-up} {
                float: inherit;

                margin-left: 19vw;
                margin-top: 11vh;

            }
        }

        &__img {
            position: absolute;
            left: 0;
            z-index: 10;
            top: 15vh;

            height: 75%;
            width: 100%;
            object-fit: cover;
            z-index: -1;
            display: block;
            overflow: hidden;
            margin-top: 0;



            >img {
                transform: scale(1.3);
                width: 100%;
                height: auto;
                margin-top: -28%;

                @media #{$medium-up} {
                    margin-top: 0;
                }



            }



            &::after {
                position: absolute;
                content: "";
                width: 0;
                width: 100%;
                height: 100%;
                background: white;
                bottom: 0;
                display: block;
            }


        }

        &__title {

            &__outer {
                position: absolute;

            }

            &__inner {
                position: relative;
            }

            position: absolute;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1em;
            text-align: left;
            font-size: 2.8rem;
            z-index:20;

            &.fill {
                -webkit-text-fill-color: white;
                -webkit-text-stroke: 1px white;
                mix-blend-mode: exclusion;
            }
            &.nofill {

                -webkit-text-fill-color: transparent;
                color: transparent;
                -webkit-text-stroke: 2px black;

            }
            span {
                display: inline-block;

            }
        }
    }
}

Вот демо-версия мигающей проблемы

Демо-версия мигающей проблемы

Я пробовал несколько вариантов с изображением и без него, другие цвета и другие варианты смешивания. Ничто не похоже на работу.

Заранее спасибо за помощь.

Хорошего дня

...