Ligature in typeable text problem

Hi ! I'm relatively new to coding with html/css and I have an issue that I really don't understand... I try to make a web specimen for a font with specific glyphs and ligatures and I want the user to be able to try and type them. I tried using an imput "text" and a

with the content editable ans the problain remains the same : when I type in the webpage, the ligatures don't show properly but when I resize the page they are good. This is really weird because the ligatures work well when typed directly in html and not in the input text on chrome and also the first "layer" of ligatures works normally. I have a first set of glyphs composed by adding a - and another symbol (*, &, # or %) and then you can type those next to each other to create the "ligatured" version of these new glyphs. That second step is the only one not working. I tried changing de distance between letters, enabling rlig (maybe I did it wrong?) and I basically have no Idea what the problem is. You can see it in the photos : first picture the placeholder where you can see a working ligature, second picture after I typed, not work, and third after the resize, working. I also put my code in the pictures ! My font is in woff2 but same problem with otf. I would gladly appreciate any leads of answer :)