HTML Inputfield can have wrong size and position when window is resized or zoomed in.

[StefanStrategis]

Suggestion:

Recalculate and apply Input rect on WebGLWindowPlugin.WebGLWindowOnResize()

Can be achieved by calling DeactivateInputField WebGLWindowPlugin.WebGLWindowOnResize.

        private void Awake()
        {
            input = Setup();
#if !(UNITY_WEBGL && !UNITY_EDITOR)
            // WebGL 以外、更新メソッドは動作しないようにします
            enabled = false;
#endif
            // for mobile platform
            if (Application.isMobilePlatform)
            {
                if (input.EnableMobileSupport)
                {
                    gameObject.AddComponent<WebGLInputMobile>();
                }
                else
                {
                    // when disable mobile input. disable self!
                    enabled = false;
                }
            }

            WebGLWindow.OnResizeEvent += DeactivateInputField;
            OnKeyboardDown += KeyboardDownHandler;
        }

[StefanStrategis]

A better solution would be to just recalculate the rect and apply it to the existing HTML element

[StefanStrategis]

Working code for updating rect size and position:
Coroutine is needed for small delay in sizing

WebGLInput.cs

        [DllImport("__Internal")]
        public static extern void WebGLInputUpdateRect(int id, string canvasId, int x, int y, int width, int height, int fontsize,  bool isMultiLine, bool isMobile) ;

        private void Awake()
        {
            input = Setup();
#if !(UNITY_WEBGL && !UNITY_EDITOR)
            // WebGL 以外、更新メソッドは動作しないようにします
            enabled = false;
#endif
            // for mobile platform
            if (Application.isMobilePlatform)
            {
                if (input.EnableMobileSupport)
                {
                    gameObject.AddComponent<WebGLInputMobile>();
                }
                else
                {
                    // when disable mobile input. disable self!
                    enabled = false;
                }
            }

            OnKeyboardDown += KeyboardDownHandler;
            WebGLWindow.OnResizeEvent += UpdateInputRect;
        }

        private void UpdateInputRect() {
            StartCoroutine(UpdateRect());
        }

        private IEnumerator UpdateRect() {
            yield return null;
            if (instances.ContainsKey(id)) {
                var rect = GetElemetRect();
                var fontSize = Mathf.Max(14, input.fontSize); // limit font size : 14 !!

                WebGLInputPlugin.WebGLInputUpdateRect(id, WebGLInput.CanvasId, rect.x, rect.y, rect.width, rect.height, fontSize, input.lineType != LineType.SingleLine, Application.isMobilePlatform);
            }
        }

WebGLInput.jslib

    WebGLInputUpdateRect: function (id, canvasId, x, y, width, height, fontsize, isMultiLine, isMobile){
        var input = instances[id];
        
        var container = document.getElementById(UTF8ToString(canvasId));
        var canvas = container.getElementsByTagName('canvas')[0];

        if(canvas)
        {
            var scaleX = container.offsetWidth / canvas.width;
            var scaleY = container.offsetHeight / canvas.height;

            if(scaleX && scaleY)
            {
                x *= scaleX;
                width *= scaleX;
                y *= scaleY;
                height *= scaleY;
            }
        }
        if(isMobile) {
            input.style.bottom = 1 + "vh";
            input.style.left = 5 + "vw";
            input.style.width = 90 + "vw";
            input.style.height = (isMultiLine? 18 : 10) + "vh";
            input.style.fontSize = 5 + "vh";
            input.style.borderWidth = 5 + "px";
            input.style.borderColor = "#000000";
        } else {
            input.style.top = y + "px";
            input.style.left = x + "px";
            input.style.width = width + "px";
            input.style.height = height + "px";
            input.style.fontSize = fontsize + "px";
        }
    },