Semantic-ui: [Modal] Android Scrolling Issue with Input Focus

[batata004]

Hi,

I got this error for months and finally today I had some time to try to track it down. It was really hard to reproduce it but finally I came with a very small code which you can test the bug.

The bug happens like this:

1) open this link http://bit.ly/25DLwdq at your Chrome in a smartphone (I tested on my Android 5 but I could also reproduce it at Android 4.4 at Chrome) -> the well formated and easy way to see source code is also attached to this issue with .txt extension, you just need to change it to HTML.

2) as soon as the page opens it will bring focus to the first input. Ok, that's normal. Click over the input and let the browser bring the keyboard into the screen.

3) You dont need to type anything, now just click outside the input to make the keyboard goes away.

4) try to scroll down the page (using the touchscreen of course) and you will not be able to do that.

This bug is happening for a long time and many of my customers complained that they could not scroll down the form inside their smartphone. I discovered that if you dont click inside any input you can scroll down the page, but as soon as you get inside any input and the keyboard appears, you cant scroll down the form anymore.

That's for sure a bug with the "modal" of semantic ui. I am not an expert but if you inspect the code of that page you will see I create 2 modals. The bug only happens when the second modal exists in the code, if you remove the second modal the bug goes away. Also if you keep the second modal but put a lot of content inside in a way that it gets bigger, the bug goes away. I think there is some bug related to the height of the second modal that affects the first modal.
index.txt

[batata004]

Any update into this? This bug still happens with v 2.2

[jlukic]

You're link is currently broken.

Can you post a JSFiddle by forking the example in the readme. This would help facilitate a quicker response.

[batata004]

Hi, indeed the link was broken. I didnt use jsfiddle cause the bug does not happen there cause they have many other objects in the page (iframes) which dont allow you to simulate this in a mobile.

Anyway, I posted it again here https://quemfazsite.com.br/temp/teste.php

Thank you for looking into this :)

[batata004]

Any update guys? Is someone taking care of this? I know in US most people use iOS but in Brazil at least 75% of people use android and this bug affects 100% of those users.

[batata004]

this bug still looks not solved...

[batata004]

Hey guys, any update into this? I am using semantic ui in loooots of websites and I still have to use "hacks" to fix this problem. When will this fix be commited to the mainstream?

[franzi50]

Hi, I also encountered this issue - upon input focus, the modal on Android Chrome looses it's ability to scroll. The problem is body drops the scrolling class. Currently I fixed it like this:

.dimmable.dimmed > .dimmer {
  overflow: auto !important;
}

Could there be any side effects for this?

Additionally, this fix is not perfect because, on input focus, the modal always re-positions itself which causes the input to disappear if it's towards the bottom of the modal content.

[batata004]

@franzi50 I am glad other person had this same problem, it's really sad this issue will make 1 year birthday and so far no fix from the authors. You are also right that the fix is not perfect cause the modal changes its position and mess everything.

[lubber-de]

This is fixed since https://github.com/fomantic/Fomantic-UI 2.7.0