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;       
}
  • Godie@lemmy.worldOP
    1·
    6 months ago

    I forgot to mention that I’m testing the code in Developer-edition new changes arrived there. I will check if other of my code, with the code posted here, makes the issue happens.

    • MrOtherGuy@lemmy.worldM
      1·
      5 months ago

      FYI, I just tested this in Firefox Nightly and I don’t see any abnormal cpu use with that either.

      I’ll take that back. It didn’t happen at first but after a short while it totally trashed my cpu and made that Firefox window mostly unusable. I tried to profile it to see what’s eating the cpu but couldn’t really find the culprit - what I did see though, is that the “overflow” button in the sidebar was flickering like crazy - this suggests that Firefox is constantly computing new the layout for the sidebar.

      • Godie@lemmy.worldOP
        1·
        5 months ago

        hi, I notice the issue happens when the #sidebar-main is ‘expanded’, when collapsed the problem doesn’t appear, I removed the code gap: 0px !important; and that solve the issue, but that space between the buttons makes me nervous jeje I tried delete too that ‘overflow’ button to remove the ‘flickering’ but the problem persist.