Fix iOS keyboard:

Opening after ESG panel
In popups

src/components/chat/bubbles.ts

@@ -504,13 +504,20 @@ export default class ChatBubbles {
       let rAF = 0;
 
       const onResizeEnd = () => {
-        //this.log('resize end', scrolled, this.scrollable.scrollTop);
+        const height = this.scrollable.container.offsetHeight;
+        if(height !== wasHeight) { // * fix opening keyboard while ESG is active, offsetHeight will change right between 'start' and this first frame
+          part += wasHeight - height;
+        }
+
+        /* if(DEBUG) {
+          this.log('resize end', scrolled, this.scrollable.scrollTop, height, this.scrollable.isScrolledDown);
+        } */
 
         if(part) {
           this.scrollable.scrollTop += Math.round(part);
         }
 
-        wasHeight = this.scrollable.container.offsetHeight;
+        wasHeight = height;
         scrolled = 0;
         rAF = 0;
         part = 0;
@@ -526,8 +533,7 @@ export default class ChatBubbles {
         });
       };
 
-      // @ts-ignore
-      const resizeObserver = new ResizeObserver((entries) => {
+      const processEntries = (entries: any) => {
         if(skip) {
           setEndRAF(false);
           return;
@@ -549,9 +555,15 @@ export default class ChatBubbles {
         if(!resizing) {
           resizing = true;
 
-          //this.log('resize start', realDiff, this.scrollable.isScrolledDown);
+          /* if(DEBUG) {
+            this.log('resize start', realDiff, this.scrollable.scrollTop, this.scrollable.container.offsetHeight, this.scrollable.isScrolledDown);
+          } */
 
           if(realDiff < 0 && this.scrollable.isScrolledDown) {
+            //if(isSafari) { // * fix opening keyboard while ESG is active 
+              part = -realDiff;
+            //}
+
             skip = true;
             setEndRAF(false);
             return;
@@ -560,25 +572,23 @@ export default class ChatBubbles {
 
         scrolled += diff;
 
-        //this.log('resize', wasHeight - height, diff, this.scrollable.container.offsetHeight, this.scrollable.isScrolledDown, height, wasHeight/* , entry */);
+        /* if(DEBUG) {
+          this.log('resize', wasHeight - height, diff, this.scrollable.container.offsetHeight, this.scrollable.isScrolledDown, height, wasHeight);
+        } */
 
         if(diff) {
           const needScrollTop = this.scrollable.scrollTop + diff;
           this.scrollable.scrollTop = needScrollTop;
-          /* if(rAF) window.cancelAnimationFrame(rAF);
-          rAF = window.requestAnimationFrame(() => {
-            this.scrollable.scrollTop = needScrollTop;
-            setEndRAF(true);
-            //this.log('resize after RAF', part);
-          }); */
-        } //else {
-          setEndRAF(false);
-        //}
+        }
+        
+        setEndRAF(false);
 
         part = _part;
         wasHeight = height;
-      });
+      };
 
+      // @ts-ignore
+      const resizeObserver = new ResizeObserver(processEntries);
       resizeObserver.observe(this.bubblesContainer);
     }
   }
@@ -2102,8 +2112,10 @@ export default class ChatBubbles {
             bubble.classList.add('photo');
 
             const size = webpage.photo.sizes[webpage.photo.sizes.length - 1];
+            let isSquare = false;
             if(size.w === size.h && quoteTextDiv.childElementCount) {
               bubble.classList.add('is-square-photo');
+              isSquare = true;
             } else if(size.h > size.w) {
               bubble.classList.add('is-vertical-photo');
             }
@@ -2117,7 +2129,8 @@ export default class ChatBubbles {
               isOut, 
               lazyLoadQueue: this.lazyLoadQueue, 
               middleware: this.getMiddleware(),
-              loadPromises
+              loadPromises,
+              withoutPreloader: isSquare
             });
           }
           

src/components/chat/input.ts

@@ -724,9 +724,13 @@ export default class ChatInput {
         this.restoreScroll();
       }); */
 
-      /* if(isSafari) {
-        this.listenerSetter.add(this.messageInput, 'focusin', () => {
-          fixSafariStickyInput(this.messageInput);
+      /* if(isSafari) {  
+        this.listenerSetter.add(this.messageInput, 'mousedown', () => {
+          window.requestAnimationFrame(() => {
+            window.requestAnimationFrame(() => {
+              emoticonsDropdown.toggle(false);
+            });
+          });
         });
       } */
     }

src/components/preloader.ts

@@ -1,6 +1,7 @@
 import { isInDOM, cancelEvent, attachClickEvent } from "../helpers/dom";
 import { CancellablePromise } from "../helpers/cancellablePromise";
 import SetTransition from "./singleTransition";
+import { fastRaf } from "../helpers/schedulers";
 
 const TRANSITION_TIME = 200;
 
@@ -24,6 +25,8 @@ export default class ProgressivePreloader {
 
   private loadFunc: () => {download: CancellablePromise<any>};
 
+  private totalLength: number;
+
   constructor(options?: Partial<{
     isUpload: ProgressivePreloader['isUpload'],
     cancelable: ProgressivePreloader['cancelable'], 
@@ -188,7 +191,7 @@ export default class ProgressivePreloader {
     //return;
 
     this.detached = false;
-    /* window.requestAnimationFrame(() => {
+    /* fastRaf(() => {
       if(this.detached) return;
       this.detached = false; */
 
@@ -204,7 +207,13 @@ export default class ProgressivePreloader {
         elem[this.attachMethod](this.preloader);
       }
 
-      window.requestAnimationFrame(() => {
+      fastRaf(() => {
+        //console.log('[PP]: attach after rAF', this.detached, performance.now());
+
+        if(this.detached) {
+          return;
+        }
+
         SetTransition(this.preloader, 'is-visible', true, TRANSITION_TIME);
       });
 
@@ -220,17 +229,21 @@ export default class ProgressivePreloader {
     //return;
     
     if(this.preloader && this.preloader.parentElement) {
-      /* setTimeout(() =>  *///window.requestAnimationFrame(() => {
+      /* setTimeout(() =>  *///fastRaf(() => {
         /* if(!this.detached) return;
         this.detached = true; */
 
-        //if(this.preloader.parentElement) {
-          window.requestAnimationFrame(() => {
-            SetTransition(this.preloader, 'is-visible', false, TRANSITION_TIME, () => {
-              this.preloader.remove();
-            });
+        fastRaf(() => {
+          //console.log('[PP]: detach after rAF', this.detached, performance.now());
+
+          if(!this.detached || !this.preloader.parentElement) {
+            return;
+          }
+
+          SetTransition(this.preloader, 'is-visible', false, TRANSITION_TIME, () => {
+            this.preloader.remove();
           });
-        //}
+        });
       //})/* , 5e3) */;
     }
   }
@@ -246,9 +259,12 @@ export default class ProgressivePreloader {
     }
     
     try {
-      const totalLength = this.circle.getTotalLength();
+      if(!this.totalLength) {
+        this.totalLength = this.circle.getTotalLength();
+      }
+
       //console.log('setProgress', (percents / 100 * totalLength));
-      this.circle.style.strokeDasharray = '' + Math.max(5, percents / 100 * totalLength) + ', ' + totalLength;
+      this.circle.style.strokeDasharray = '' + Math.max(5, percents / 100 * this.totalLength) + ', ' + this.totalLength;
     } catch(err) {}
   }
 }

src/components/wrappers.ts

@@ -644,7 +644,7 @@ export function wrapPhoto({photo, message, container, boxWidth, boxHeight, withT
   const load = () => {
     const promise = getDownloadPromise();
 
-    if(!cacheContext.downloaded && !withoutPreloader) {
+    if(!cacheContext.downloaded && !withoutPreloader && (size as PhotoSize.photoSize).w >= 150 && (size as PhotoSize.photoSize).h >= 150) {
       preloader.attach(container, false, promise);
     }
 

src/lib/rootScope.ts

@@ -85,11 +85,13 @@ type BroadcastEvents = {
   'event-heavy-animation-end': void,
 
   'im_mount': void,
-  'im_tab_change': number
+  'im_tab_change': number,
+
+  'overlay_toggle': boolean,
 };
 
 class RootScope extends EventListenerBase<any> {
-  public overlayIsActive: boolean = false;
+  private _overlayIsActive: boolean = false;
   public myId = 0;
   public idle = {
     isIDLE: false
@@ -110,6 +112,15 @@ class RootScope extends EventListenerBase<any> {
     });
   }
 
+  get overlayIsActive() {
+    return this._overlayIsActive;
+  }
+
+  set overlayIsActive(value: boolean) {
+    this._overlayIsActive = value;
+    this.broadcast('overlay_toggle', value);
+  }
+
   public broadcast = <T extends keyof BroadcastEvents>(name: T, detail?: BroadcastEvents[T]) => {
     /* if(DEBUG) {
       if(name != 'user_update') {

src/scss/partials/_chat.scss

@@ -116,9 +116,10 @@ $chat-helper-size: 39px;
 		background: none;
 		border: none;
 		width: 100%;
-		padding: 9px 8px;
+		padding: .6875rem .5625rem;
 		/* height: 100%; */
-		max-height: calc(30rem - var(--padding-vertical) * 2);
+		max-height: calc(30rem - 2.5rem); // 2.5rem - input helper (reply)
+		min-height: inherit;
 		overflow-y: none;
 		resize: none;
 		border: none;
@@ -830,6 +831,7 @@ $chat-helper-size: 39px;
 		position: relative;
 		overflow: hidden;
 		align-self: center;
+		min-height: calc(var(--chat-input-size) - var(--padding-vertical) * 2);
 
 		> .scrollable {
 			position: relative;