[Bug v3]: stuttery modal transition on mobile devices

[orestbida]

Expected Behavior

The preferences modal 'show' transition should be smooth on mobile devices.

Current Behavior

The current slide transition — translatey() — stutters on mobile devices, especially on lower end ones.

Steps to reproduce

See preferences modal transition.

Proposed fix or additional info.

Replace slide with the zoom transition (which is also the default in v2).

Version

v3.x.x

On which browser do you see the issue?

Firefox, Chrome

[orestbida]

Needs more investigation. Changing slide to zoom transition does not fix it.

[darkWolf-PR]

Hi, this is connected to this report in Google PageSpeed @orestbida ?

"Avoid non-composited animations - 1 animated element found"

Animations which are not composited can be janky and increase CLS. [Learn how to avoid non-composited animations] CLS Links to this: https://developer.chrome.com/docs/lighthouse/performance/non-composited-animations/   Element:

We are using cookies We use cookies to analyze data about our visitors, to impr… <div class="cm cm--box cm--bottom cm--left" role="dialog" aria-modal="true" aria-hidden="false" aria-describedby="cm__desc" aria-labelledby="cm__title" style="visibility: hidden;">

I´ve been just checking one website after implementing V3 CC and this pop-up. Insights shows the same also for the V2 version.

Is it possible to turn the animation off? I did not found anything in manual.

[orestbida]

@darkWolf-PR , the stuttery modal is not related to this warning.

"Avoid non-composited animations - 1 animated element found"

The warning probably refers to the visibility property: Unsupported CSS Property: visibility. The warning simply tells you that there may be performance issues, but that's just not the case when talking about visibility.

Unlike other properties, such as opacity and transform, visibility cannot be composited by the browser; it means that the browser is not able to figure out the transition values (interpolation) between visible and hidden, since there aren't any. The visibility prop. only allows 2 values: hidden (0) and visible (1). It's binary, just like display, but unlike display it can be animated.

There is a way to avoid this warning, but it requires the use of javascript, which I don't like.

Is it possible to turn the animation off? I did not found anything in manual.

To disable the transition, simply set the following css variable:

--cc-modal-transition-duration: 0s;

I don't think this will make the warning disappear though, since the transition is still there (just not visible). You'd need to remove the transitions entirely:

#cc-main .cc--anim .cm,
#cc-main .cc--anim::before,
#cc-main .cc--anim .pm,
#cc-main .cc--anim .pm-overlay {
    transition: none!important;
}

[darkWolf-PR]

It´s strange, but it looks like the duration: 0s is enough to get rid of that line in Insights.