Home>

The buttons are hidden at the bottom of the screen along with the scrolling, and a button that appears again after the scrolling is finished. However, this action (when the button disappears and when it appears) causes the screen to flicker when viewed on a smartphone (because the scroll and buttons are jerky).
At the same time, the background watermark image also has a problem.
Movie Can anyone tell me how to solve it?
Thank you.

<% = link_to *** _ path, class: "btn btn-primary btn-exhibit" do%>
   <i></i>
<% end%>
$(document) .on 'turbolinks: load',->
     $('# main'). scroll->
       setTimeout->
         $('. btn-exhibit'). addClass ('btn-hidden')
       , 200
     setTimeoutId = null
     $('# main'). on 'scroll',->
       if setTimeoutId
         clearTimeout (setTimeoutId)
       setTimeoutId = setTimeout->
         $('. btn-exhibit'). removeClass ('btn-hidden')
         setTimeoutId = null
       , 700


↓ Bottom right button

. btn-exhibit {
    ** Omitted **
    transition: bottom .4s ease, right .4s ease, transform .4s ease;
    box-shadow: 0 3px 12px rgba (0, 0, 0, 0.23), 0 3px 12px rgba (0, 0, 0, 0.16);
   &.btn-hidden {
     bottom: -45px;
   }
}

↓ Background image watermark

. item-list .item {
    overflow: hidden;
    a {
        width: 100%;
        height: 100%;
        margin: 0;
        border: none;
        border-radius: 0px;
        background-color: #ffffff;
        color: # 000000;
        .thumbnail {
            z-index: 0;
            position: relative;
            text-align: center;
            height: 150px;
            width: 100%;
            font-size: 0;
            line-height: 0;
            padding: 0;
            margin: 0 auto;
            overflow: hidden;
            .thumbnail-bg {
                $blur: 30px;
                $blur-offset: 30px;
                / * Dazzling and bright
        $saturation: 80%;
        $brightness: 250%;
        * /
                $saturation: 150%;
                $brightness: 150%;
                / * Thick and firm
        $saturation: 200%;
        $brightness: 100%;
        * /
                z-index: 1;
                position: absolute;
                top:-$blur-offset;
                bottom:-$blur-offset;
                left:-$blur-offset;
                right:-$blur-offset;
                background-size: 100% 100%;
                &: before {
                    content: '';
                    background: inherit;
                    / * Inherits the background image set in .bgImage * /
                    -webkit-filter: blur ($blur) saturate ($saturation) brightness ($brightness);
                    -moz-filter: blur ($blur) saturate ($saturation) brightness ($brightness);
                    -o-filter: blur ($blur) saturate ($saturation) brightness ($brightness);
                    -ms-filter: blur ($blur) saturate ($saturation) brightness ($brightness);
                    filter: blur ($blur) saturate ($saturation) brightness ($brightness);
                    position: absolute;/ * Adjust the position by blurring the edge of the image * /
                    top: -1 * $blur-offset;
                    left: -1 * $blur-offset;
                    right: -1 * $blur-offset;
                    bottom: -1 * $blur-offset;
                    z-index: -1;
                    / * Keep stacking order at the bottom * /
                }
                &.sold-out: before {
                    -webkit-filter: blur ($blur) saturate ($saturation) brightness (200%) grayscale (100%);
                    -moz-filter: blur ($blur) saturate ($saturation) brightness (200%) grayscale (100%);
                    -o-filter: blur ($blur) saturate ($saturation) brightness (200%) grayscale (100%);
                    -ms-filter: blur ($blur) saturate ($saturation) brightness (200%) grayscale (100%);
                    filter: blur ($blur) saturate ($saturation) brightness (200%) grayscale (100%);
                }
            }
            img {
                z-index: 2;
                position: absolute;
                left: 50%;
                -webkit-transform: translateX (-50%);
                transform: translateX (-50%);
                width: auto;
                max-width: 100%;
                height: 100%;
                box-shadow: 0px 0px 8px 3px rgba (0, 0, 0, 0.15);
                -moz-box-shadow: 0px 0px 8px 3px rgba (0, 0, 0, 0.15);
                -webkit-box-shadow: 0px 0px 8px 3px rgba (0, 0, 0, 0.15);
                &.sold-out {
                    -webkit-filter: grayscale (50%) saturate (30%);
                    -moz-filter: grayscale (50%) saturate (30%);
                    -o-filter: grayscale (50%) saturate (30%);
                    -ms-filter: grayscale (50%) saturate (30%);
                    filter: grayscale (50%) saturate (30%);
                }
            }
        }
        .item-info {
            border-top: solid .5px # e5e5e5;
            position: relative;
            margin: 0;
            height: 56px;
            background-color: # F6F7F9;
            .item-name {
                display: block;
                font-weight: bold;
                text-align: center;
                padding: 0;
                margin: 0;
                line-height: 24px;
                font-size: 11px;
                height: 24px;
                overflow: hidden;
                background-color: # F6F7F9;
                &.sold-out {
                    color: # 999999;
                }
            }
            .bookmark {
                display: block;
                position: absolute;
                line-height: 24px;
                left: 0px;
                bottom: 0px;
                padding-left: 8px;
                padding-bottom: 4px;
                color: # d9b86c;
                i :: before {
                    content: "\ f08a";
                }
                &: hover i: before {
                    content: "\ f004";
                }
            }
            .price {
                &.sold-out {
                    color: # 888888;
                }
            }
        }
    }
}
  • Answer # 1

    I haven't read all the sources, so I don't know why, but
    If you change top/left/right/bottom or margin/padding with transition,
    Since the dom tree will be redrawn, performance will drop.

    . btn-exhibit {
        transform: translateY (45px);
        transition: all .4s ease;
        box-shadow: 0 3px 12px rgba (0, 0, 0, 0.23), 0 3px 12px rgba (0, 0, 0, 0.16);
    }

    Is there any problem here? I think that the performance will improve (should be) even if it becomes more difficult.

    transformis interesting because it allows you to rotate and transform if you specify it in various ways.
    Link: https://developer.mozilla.org/en/docs/Web/CSS/transform

Related articles