WKWebview with external keyboard behaviour

Currently I am using Objective-C and embedding a React website into the WKWebview. I have a component with scroll function and I also have some text description with an input component in the scroll function component. If the input component is shown all and I onClick the input component for inputting value in it, it works normally. However, when the input component shows only half of it and another half is hidden by the scroll component (Because it scrolls to see only half of the input component), it will triggers an unexpected issue that the WKWebview will have a white bar on the bottom and it will keep exists and affecting my UI. I have checked with web inspector that it is outside of the <html> tag. Therefore, seems it is related to the issue with the external keyboard behaviour.

Please provide some suggestion if anyone have any idea on this topic. Thanks a lot

WKWebview with external keyboard behaviour
 
 
Q