[Bug]Tapping in text input field in iframe in modal causes entire contents on screen to shift downward half+ page

[camogli]

Steps to reproduce

I can reproduce this bug often, but not 100% of the time. We created some simplified test pages in order to demonstrate the bug. Clear all browser data if you cannot reproduce, and/or change the 1 in the url below to 2, 3, or 4 (different versions of the same issue).

1. Open Firefox (v79 or later) on an Android device
2. Type (or paste) the following URL into the URL bar: https://www.fark.com/test/ff79-android/simpleiframe1.html
3. Click or tap in the text input field

Expected behavior

The contents of the main page should remain where they are. A modal should be overlayed over the center portion of the main page. Clicking or tapping in the text input field should make no change to the content of the page other than placing a cursor in the box and allowing the user to type.

Actual behavior

Clicking or tapping in the text input field causes the contents of the entire page (original page and modal overlay) to shift downward by anywhere from half to three-quarters of a page. It's difficult to describe, but I have a video at https://www.fark.com/test/ff79-android/ff79android.mov

Device information

The screen recording above is from the following setup:

• Android device: Android x64 0.0-r2 in a VM
• Fenix version: Nightly 200918 15:19 (Build #2015764671)

However, we have asked other users to test on various other Android devices and all had the same issue if they were running FF79 or FF80 beta.

Other Information

The URL above (simpleiframe1.html) uses CustomBox to display a modal. We also tried two other 3rd party modal frameworks as well as one with plain javascript. All have the same isue.
https://www.fark.com/test/ff79-android/simpleiframe1.html
https://www.fark.com/test/ff79-android/simpleiframe2.html
https://www.fark.com/test/ff79-android/simpleiframe3.html
https://www.fark.com/test/ff79-android/simpleiframe4.html

The bug only seems to occur when the modal contains an iframe. We have other test page that do not contain an iframe, and the issue doesn't occur. Here are the same pages with an iframe, that are fine:
https://www.fark.com/test/ff79-android/simplenoiframe1.html
https://www.fark.com/test/ff79-android/simplenoiframe2.html
https://www.fark.com/test/ff79-android/simplenoiframe3.html
https://www.fark.com/test/ff79-android/simplenoiframe4.html

The problem can be reproduced in a new Firefox profile.
The problem can be reproduced with the latest nightly build - Build ID 2015764671

This is my first Mozilla bug report so apologies if I missed anything. Please let me know if there is any extra information I can provide that would be useful.

┆Issue is synchronized with this Jira Task

[ekager]

Moved to bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1666065

[agi]

@camogli we can't reproduce the issue on our end, can you tell me a few devices where you can reproduce this? Any other specific configuration (it looks like you have a hardware keyboard), is this on a tablet or does it reproduce on phones too?

[camogli]

Very sorry for the delay. I've been trying to get information for you from other users with Android devices. Unfortunately, I do not have access to a physical Android phone/tablet. As mentioned in my report, the screen recording I took is from an Android x64 9.0-r2 running in a Virtual Machine. I know this isn't a perfect real-world scenario, but it's all I have right now. Generally I use BrowserStack to test different devices, but I can't find a device on BrowserStack that has been updated to FF79, and the issue only starting happening on v79.

We started looking into this because our users have been reporting the problem on real devices on our website. This happens on our comment pages - like https://m.fark.com/comments/10966748. Users click the 'Reply' button (the square icon with a pencil on the right side of each comment), and then click in the text boxes to log in (or if already logged in, they click in a textarea to write their response). Then they just see grey space. In actuality, the content has shifted down the page, but usually they don't see realize that since it has shifted so far down. We created the test pages to try to eliminate variables (we run a lot of javascript on Fark), and when we were able to reproduce the same issue in the VM, that's when I reported it.

I asked two people to try to reproduce this yesterday afternoon (Sep 27) with the latest Firefox Nightly build. They both reproduced the same issue on m.fark.com. However, when I sent them the test pages (https://www.fark.com/test/ff79-android/simpleiframe[1-4].html), neither of them were able to reproduce it on those pages (which is quite frustrating).

I don't think the problem is with something else on our website, since I can still reproduce the problem on the VM with the latest FF Nightly (screenshots attached). However, since both Android users yesterday could reproduce the issue on our site (with the latest Nightly) but not on our test pages, we might have something on Fark that makes it more likely to happen.

The two phones that were able to reproduce the problem on m.fark.com (but not the test pages... yet) were a Samsung Galaxy Note 5 running Android 7 and a Galaxy S9+ running the latest Android 10 (both running FF Nightly). We have also had user reports from a Pixel 3a running Android 9 and a Galaxy S8+ running Android 10.

Please let me know if I can test anything else or get you any other information.