Sitecore Experience Editor - Cannot read properties of null (reading 'parent') or Chrome is null

Content authors raised an issue regarding experience editor. They were unable to add component and sometimes if they change an existing content and click save, changes are not saved. 

Looking at the browser console, I found two different errors.

1. Cannot read properties of null (reading 'parent')
2. Chrome is null

Uncaught TypeError: Cannot read properties of null (reading 'parent')
    at proto.constructor.getChildChromes (7735732537615497509.JS:3737:20)
    at proto.constructor.renderings (7735732537615497509.JS:7242:32)
    at proto.constructor.activate (7735732537615497509.JS:10432:53)
    at proto.constructor.onShow (7735732537615497509.JS:7223:27)
    at proto.constructor.<anonymous> (7735732537615497509.JS:2952:17)
    at Function.each (7735732537615497509.JS:23:12795)
    at Object.insertionStart (7735732537615497509.JS:2951:9)
    at Object.showRenderingTargets (7735732537615497509.JS:1739:38)
    at Object.showRenderingTargets (ExperienceEditorProxy.js:98:18)
    at Object.execute (AddComponent.js:23:29)

Scenarios: 

1. When the experience editor loads, initially the authors are able to update the existing content. But after few seconds, if they try to edit a single line text, then it will be editable but the changes will not be saved. Default text (No text in field) will not disappear on click. 
2. When the author tries to add a component in the experience editor, immediately the browser console error is thrown.  

Editing Single Text field in normal process.  (Default text does disappear on click)

Editing Single Text field when there is an issue. (Default text does not disappear on click)

Clicking Add Component button throws console error

Troubleshooting: Added a breakpoint where the code throws the error in the browser. There were 120+ fields with chrome for editing. Error was thrown in 66th loop and pin pointed the related component. Added a small code in the experience editor JS file in the browser and enabled a breakpoint to find the problematic field.

    for (var i = 0; i < l; i++) {
      var currentElem = $sc(elements[i]);
      var chrome = Sitecore.PageModes.ChromeManager.getChrome(currentElem);

      /* Custom added */
      if (chrome == null) {
          console.log("Chrome is null for element");
      }
      /* Custom added */
      
      if (!deep) {
        /* if dom node's parent chrome is not this chrome, it means there is a chrome in between, so we disregard it a descendant, but not a child. */
        if (chrome.parent(false, false) != this) {
          continue;
        }
      }  
      

Root cause is really simple. One of component built in the frontend (Sitecore Headless) was transitioning after a defined interval (10 seconds) and changed the already generated Sitecore html for experience editor. Sitecore experience editor javascripts were not able to find the related elements and it threw the error. This error will occur for sliders and other components where there is a transition with changes to the html. example: carousel or sliders. 

Ideally we should load sliders in a stacked manner in experience editor so that content authors can edit easily without animation but view the transition in preview mode. This is not a new thing but sometimes frontend developers forget to use context.pageEditing flag and load the content in a different way for editing purposes. 

Example: Carousel in Experience editor

Example: Carousel in Preview Mode