8000 Unexpected CSS transitions on mount · Issue #15957 · sveltejs/svelte · GitHub
[go: up one dir, main page]
Skip to content

Unexpected CSS transitions on mount #15957

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
PavelLaptev opened this issue May 19, 2025 · 2 comments
Open

Unexpected CSS transitions on mount #15957

PavelLaptev opened this issue May 19, 2025 · 2 comments

Comments

@PavelLaptev
Copy link
PavelLaptev commented May 19, 2025 •
edited
Loading

Describe the bug

Hi! I'm experiencing a strange behavior in some components in Svelte. Some elements mount while firing CSS transitions.
Here's how it works — I have a component with a transition property like this:

.tip-button {
  color: red;
  transition: color 1s;

  &:hover {
    color: black;
  }
}

On mount, it animates from the default color (set in body) to the one specified in the class. Here's how it looks when I refresh the page:

Screen.Recording.2025-05-19.at.21.27.06.mov

This doesn't happen for all components. To prevent this behavior, I wrote a custom hook that adds and removes a class with transition: none for glitching elements. But this is just a temporary workaround.

It seems like I might be missing something, but I can't figure out what. Appreciate any help :-) Thank you in advance.

Reproduction

I don't have a REPL, so I can't reproduce it there. Everything works fine in the REPL. However, in this component, WorktreeTipsFooter.svelte, there's a section with a class tip-footer__tips that has this effect. It's the one shown in the video above.

Logs



System Info


System:
    OS: macOS 15.4
    CPU: (12) arm64 Apple M3 Pro
    Memory: 114.56 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v22.11.0/bin/npm
    pnpm: 10.3.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 136.0.7103.114
    Safari: 18.4
  npmPackages:
    svelte: catalog:svelte => 5.28.2


Severity


annoyance

      		
    

      
  





        



            
            

              
            

        

      


      
    








      

    



      

  
            

    

      
    

    


      

          @PavelLaptev
PavelLaptev




        changed the title
CSS transitions fire on mount

Unexpected CSS transitions on mount


      May 19, 2025

    

  








      

  
      



  

  @PavelLaptev





  


    

      

  

    

        
    
    

  


      
          
  
      
            Copy link

  

      
    

  


  

      



      

  Author


  


  
    

      

      
            PavelLaptev
  

      

      

      commented


        May 19, 2025


      
  •

  

    
      

        
          edited
          
        
        
      

    
    
      
  
        
      Loading


  
    
  



    


  




      


        


  
    

      
          
Another example. There are no animations, only transition properties:



  
    
    Screen.Recording.2025-05-19.at.22.01.13.mov
    
  

  



      		
    

  





        


            

            
            

              
            

        

      


      

            
  
  

    
  
    
    

  

  

  


    












      

  
      



  

  @munHunger





  


    

      

  

    

        
    
    

  


      
          
  
      
            Copy link

  

      
    

  


  

      



      

  


  
    

  




      


        


  
    

      
          
If I were to guess you have customElements: true in your compiler options, and somewhere you are referencing the node that get rendered during mount (ex with a svelte action or transition).


I have at least seen this exact thing before and there is also the issue #15773 that seems related to this.

      		
    

  





        


            

            
            

              
            

        

      


      

            
  
  

    
  
    
    

  

  

  


    
















  
  

    

      

  





  




  
  

              

  
    Sign up for free
    to join this conversation on GitHub.
    Already have an account?
    Sign in to comment


  



  






  
                  




    

  


      
  

    Assignees
  



        

    No one assigned







      


  


  

    Labels
  



    

    None yet







      

  

    

        

    Projects
  


        




    None yet




  



      


  

    
  

    Milestone
  


      No milestone





    
      
          


  

    

      
        

          
    

    Development
  




            
    
No branches or pull requests







      
    

  




      

    

  
      

  

    

      2 participants
    

    

        
          @munHunger 
        
          @PavelLaptev 
    

  






    

    




    






  

          

        



    



  





    

  


  


          



    



  

    

    

    





    


    

    

  



0