Question 308977 in Html Question posted in
Some basic documentation can be found here.

Html – why won't the will-change in my css code work?

On lines 1161-1176 and 1190-1206 in the css file and lines 58-67 in the js file, when I click on the search logo nothing happens.

Yet, I expect the search bar to appear like the video when you click on it.

Code Snippet – Full GitHub Repository

/* lines 58-67 */

const searchButton = document.querySelector('.t-search'),
      tClose = document.querySelector('.search-close'),
      showClass = document.querySelector('.site');
searchButton.addEventListener('click', function() {
    showClass.classList.toggle('showsearch')
})

/* lines 1161-1176 */

.search-bottom {
    position: fixed;
    bottom: 60px;
    width: var(--percent100);
    padding: 2.5em 0;
    background-color: var(--secondary-dark-color);
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    will-change: visibility, opacity;
}

.showsearch .search-bottom {
    visibility: inherit;
    opacity: 1;
}

/* lines 1190-1206 */

.overlay {
    position: fixed;
    width: var(--percent100);
    height: var(--percent100);
    top: 0;
    left: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
    will-change: visibility, opacity;
}

.showmenu .overlay {
    opacity: 1;
    visibility: inherit;
}
Tags:

2

Answers


  1. 0

    I have identified the issue and implemented a solution to address the problem.

    The bug stemmed from the application of the showsearch class to a div with the class site while attempting to display the search input field through CSS. The initial CSS code used was ineffective because the .showsearch class was not a descendant child of .site.

    .showsearch .search-bottom {
    visibility: inherit;
    opacity: 1;
}

    It will looks like this when the class is toggled.

    <html>
   <body>
      <div class="site showsearch">
         ...
         ...
      </div>
      ...
      <div class="search-bottom desktop-hide">
         ...
      </div>
  </body>
</html>

    To resolve this, I recommend adding the showsearch class to the body instead of toggling it on the .site div. Here is the modified JavaScript snippet:

    const searchButton = document.querySelector('.t-search'),
    tClose = document.querySelector('.search-close'),
    showClass = document.querySelector('body');

searchButton.addEventListener('click', function () {
    showClass.classList.toggle('showsearch');
});

    This adjustment ensures that the .showsearch class is toggled on the body element, resulting in the following structure:

    <html>
   <body class="showsearch">
      <div class="site">
         ...
         ...
      </div>
      ...
      <div class="search-bottom desktop-hide">
         ...
      </div>
  </body>
</html>

    Additionally, I observed that the overlay is not visible when showmenu is toggled. To rectify this, I recommend modifying the querySelector in the show mobile menu section at line 20 to include the overlay:

    //show mobile menu
const menuButton = document.querySelector('.trigger'),
    closeButton = document.querySelector('.t-close'),
    addclass = document.querySelector('body');
menuButton.addEventListener('click', function () {
    addclass.classList.toggle('showmenu')
})

    This adjustment ensures that the overlay is displayed when the mobile menu is toggled.

    Also add transition: opacity 0.4s, visibility 0.4s; to both .search-bottom and .overlay to have a smooth transition.

    Login or Signup to reply.
  2. 0

    The will-change CSS property is used to inform the browser that an element is expected to change in the future, allowing the browser to make optimizations for smoother animations and transitions. However, there are some considerations and potential reasons why will-change might not work as expected:

    1. Unsupported Properties or Elements:

      • Not all properties or elements benefit from using will-change. It’s most effective for properties like transform and opacity that are commonly used in animations. Applying it to properties that don’t trigger GPU acceleration may not provide performance improvements.

    2. Overuse of will-change:

      • Applying will-change to too many elements or properties can have adverse effects. It’s meant to be used selectively on elements that are known to cause performance issues, rather than as a blanket rule for all elements.

    3. Early Optimization:

      • Applying will-change prematurely might not yield noticeable benefits. It’s recommended to use it only when performance issues arise and profiling indicates a need for optimization.

    4. Hardware Acceleration Support:

      • will-change is most effective when the browser supports hardware acceleration. However, not all browsers or devices may provide the same level of hardware acceleration. Ensure that the browser and device you’re testing on support hardware acceleration.

    5. Correct Syntax and Usage:

      • Verify that you’re using the correct syntax for will-change. It is usually applied to the element you expect to change, like this: 
        .your-element {
  will-change: transform;
}

    6. Animations and Transitions:

      • Ensure that you are using animations or transitions on the specified property. If an element doesn’t have any transitions or animations, the browser might ignore the will-change property.

    7. Testing in Browser DevTools:

      • Use your browser’s developer tools to inspect the rendering performance. Look for indications that will-change is having the desired effect, such as GPU acceleration.

    Here’s an example of how you might use will-change for a CSS transition:

    .your-element {
  transition: transform 0.3s ease-in-out;
  will-change: transform;
}

    Remember that browser rendering behavior can vary, and will-change is just one tool among many for optimizing performance. Use it judiciously and in conjunction with other performance optimization techniques based on your specific use case and requirements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search