3w ago

CPU issue when removing 'gap' in tools-and-extensions

hi, I have the next code to set a smooth transition from the bottom up, of 'tools and extensions', when I set 0px to 'gap' rule, the CPU reach 100% and the PC just die until I remove the code, I think it is caused for the transform rule, I changed the rule: transform: translateY(10px) !important; to a negative value and that solve the issue, but the transition is different, and I want to keep it.

The code is just this:

    
/* Hide tools except for the last one 'configuration' */

.actions-list[orientation="vertical"]:not(:hover) moz-button[type="icon ghost"]:not(:last-child),
.actions-list[orientation="horizontal"]:not(:hover) moz-button[type="icon ghost"]:not(:first-child) {
    opacity: 0 !important;
    transform: translateY(10px) !important;
    visibility: collapse !important;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease, transform 0.4s ease;
}

/* Show all tools when 'hover' */

.actions-list[orientation="vertical"]:is(:hover) moz-button[type="icon ghost"]:not(:last-child),
.actions-list[orientation="horizontal"]:is(:hover) moz-button[type="icon ghost"]:not(:first-child) {
    opacity: 1 !important;
    transform: translateY(0px) !important;
    visibility: visible !important;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease, transform 0.4s ease;
}

.tools-and-extensions[orientation="horizontal"] {
    gap: 0px !important;       
}