Chrome iOS incorrectly displays a website when new tab

[pobch]

To reproduce this bug, all conditions below need to be met.

1. Use iPad (iOS)
2. Use Chrome. Other browsers, e.g. Safari, Firefox, are working fine.
3. Open the website by clicking a link and open a new tab (<a target="_blank"/>). Directly type the url in address bar or reload the page will not reproduce the bug.

Steps:

1. On iPad, open Chrome
2. Go to www.crispyscript.com
3. Click the top-right menu on the nav bar.
4. Click the link "Create Diagram"
5. Diaaagram website should be open in the new tab
6. BUG: There is not any buttons on the bottom of the website

Possible solution:

• (Not work) https://stackoverflow.com/a/65382467
• (Not work) https://stackoverflow.com/a/70029081

Actual solution: We need to combine all of the following techniques

• Use min value between window.innerHeight and document.documentElement.clientHeight instead of rely on pure document.documentElement.clientHeight
  • Why?: document.documentElement.clientHeight return a wrong value. It shows a static value which is the content height + the URL bar. Whereas, window.innerHeight shows a dynamic value depending on there is the URL bar or not.
• Revise UX, force a user to click the adjust screen button at first visit
  • Why?: window.innerHeight will show the correct value only after the first resize event occurs. The mechanism of opening a new tab is:
    1. The website is loaded in a new tab. The URL bar appears. window's load event is triggered.
    2. At this stage, window.innerHeight = document.documentElement.clientHeight = the content height + the URL bar
    3. The window's resize event is triggered rapidly
    4. At this stage, window.innerHeight = the content height. Whereas, document.documentElement.clientHeight = the content height + the URL bar
    5. We want to use the content height. Alternative solution is to listen to window's resize event, but in that case we need to handle the resize event that is triggered from a soft keyboard?
       • Fix: Soft keyboard issue in Android #36