Textarea outline issue of Android 4 #5728

Closed
mrextreme opened this Issue Mar 4, 2013 · 12 comments

Comments

Projects
None yet
4 participants

Yes, yet another textarea issue...

I have a popup with a form inside, that having two textareas inside, and on Android 4.0.x ( Galaxy Note 1, S.E. xPeria Arc S, stock Android browser on both ) it seems to behave weirdly. When I tap into a textarea, it gets "highlighted", outlined. But probably because since 1.3.0 the input fields themselves don't have rounded edges, only their container divs, the outline is the full textarea with it's sharp 90 deg. corners. But it works nicely with Android 2.3.x.

Custom CSS:

<style type="text/css">

#thePopup-popup
{
    width: 96% !important;
    left: 2% !important;
    right: 2% !important;
}

#blabla
{
    resize: none;
    height: 5em;
}

</style>

Screenshots:

http://imageshack.us/a/img819/7216/screenshot2013030415325.png
http://imageshack.us/a/img707/2249/screenshot2013030415294.png
http://imageshack.us/a/img812/3200/screenshot2013030415191.png

JSBIN: http://jsbin.com/educip

Member

jaspermdegroot commented Mar 5, 2013

@mrextreme

Re: "But probably because since 1.3.0 the input fields themselves don't have rounded edges, only their container divs" - The textarea isn't wrapped in a container. I don't think we made changes here but have to check to be sure.
I will test this on vanilla Android 4.0 to see if this is a Samsing (Note) issue.

Here is an other JSBin example: http://jsbin.com/oferij The only difference bitween this and the previous ( http://jsbin.com/educip ) is that the latter one has a close button on the popup, and that seems to make the difference and move the textarea.

SE xPeria Arc, stock (SE) Android 2.3.4, stock browser:
Samsung Galaxy Ace with CyanogenMod 7.2.0 ( Android 2.3.7 ), stock browser:
the corner of the textarea is covered by the close "X" icon, otherwise looks good

SE xPeria Arc S, stock (Sony) Android 4.0.4, stock browser:
test 1: the rounded corner becomes sharp 90 deg. corner when focused, but stays in place
test 2: as in test 1, plus textarea jumps in front of the close icon partially covering it, and becomes wider than the popup itself

iPhone 5, iOS 6.1.2, stock Safari:
test 1: works perfectly!
test 2: the corner of the textarea is covered by the close "X" icon

The "corner of the textarea is covered by the close 'X' icon" issue can be addressed by a padding CSS on the div, I am not really worried about that. And the rest might be browser issue. :(

I just realised that I have a suprisingly similar issue with normal type="text" fields :( When I focus on them, they become bigger than the bounding round-cornered div.

Member

jaspermdegroot commented Mar 18, 2013

@mrextreme

I still can't reproduce the issue. Can you test http://jsbin.com/atarer/4 on your Android 4.0 device and post a screenshot? Thanks!

About the close button. It's common to have it positioned like that for photo popups, etc.. That's why we made it easy to achieve this by just adding the ui-btn-right class. In cases where this is isn't convenient you shouldn't use the class or override the offset with custom CSS. So this is not a bug.

@ugomobi

Well, we see at least two different issues now.

  1. If I have a close X icon on the popup, then it pushes the textarea to the side ( left or right, depending on the location of the close icon.

  2. The Android 4.0 issue with duplicate text fields, causing all sorts of nasty corner and size problems. This only happens when you tap on the field, thus focusing on it. Until then everything is fine, so it indeed looks like the aformentioned Android bug.

Now, I am going to try the CSS trick.

Screenshots ( stock Android 4.0.4 browser on Samsung Galaxy Note / GT-N7000 )

Screenshot_2013-03-04-15-29-44

Screenshot_2013-03-19-09-38-29

Screenshot_2013-03-12-10-27-58

Yeah, the input fields look ok now, but there is no cursor (caret) in them, and the keypad also behaves weirdly, doesn't disappear when the input field loses focus, etc. So it fixes one issue, and creates two new. :(

Ooooooo!!!! I had a suspicion for a while now... Our custom JQM theme causes issues. We use the same one since JQM 1.0 or 1.1, importing the old and then exporting the updated version every time the ThemeRoller gets an update, and by now it collected some issues between the upgrades. The main textarea problem got solved once I commented out the inclusion of our JQM theme in the HTML file. Yaay!

But the rest of the weirdness remains. Boo. :(

Normal input type=text/password is still looking bad, and the keypad doesn't close when a textarea loses focus. And in textareas, the caret always jumps to a specific (random?) location, even if I tap on somewhere the text, it immedialtelly jumps back where it was, let it be the end of the text, or somewhere in the text. LOL. And a whole lot of other weirdness is happening in the background every time I focus on a textarea, I see animation happening behind the popup. :)

Anyone? Anyone? Bueller? Bueller?

Ruffio commented Nov 12, 2014

@mrextreme on a Nexus 7 Android 4.4.4 Chrome 38 I'm not able to reproduce any of the graphically issues using you test page in first post.

However clicking outside the popup causes it to close but the keyboard stats open.

Owner

arschmitz commented Nov 12, 2014

Im going to close this since this time the textarea handling has been completely re-written and it seems like it cant be reproduced. Also this widget will move to jQuery UI in 1.6 closing as stale / no longer reproducible.

arschmitz closed this Nov 12, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment