796556 - [settings] subtitle can overflow into checkbox area

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia, defect)

Description

[GH to BZ]

[GitHub issue by nhirata on 2012-08-28T14:50:03Z, https://github.com/mozilla-b2g/gaia/issues/4005]
## Environment :
Otoro phone, build 2012-08-27
Taken from default.xml in b2g-distro: 
* "platform_build" revision= 76e88b579737d7b5078063dcbec60c2ad2c70465
* "gaia" revision= a20b169471345125092e91f981581dccd23e3371 
* "mozilla-central" revision= 1bf80bf946010db2810996225e143a3c50cede36
* "gonk-misc" revision= a9b6133e492017d34703ae3f24ea1fa9349cbcce

## Repro :
1. go to settings -> keyboard, scroll to Other Latin scripts

## Expected :
1. subtitle doesn't overflow into checkbox

## Actual :
1.subtitle overflows into checkbox
## Note :

Comment 1

[GH to BZ]

[GitHub comment by nhirata on 2012-08-28T14:51:55Z]
screenshot : http://cl.ly/image/1z2P1k2j050z

Comment 2

[GH to BZ]

[GitHub comment by autonome on 2012-08-29T02:07:30Z]
Not blocking, because polish and sub-sub-ui.

Comment 3

[Sam Foster [:sfoster] (he/him)]

Attachment: Screenshot of settings/keyboard offset & scroll issue

I'd like to take this as my first gaia issue. I read the issue as being the offset of the header (e.g. "Keyboard") when you select one of the settings in the main screen; it should be top,left 0,0 but ends up being at top:~5rem. (See b2g-gaia-settings-796556.png attachment)

It looks like this may be a transform issue, as the inspector highlights the element where it should be, but there's nothing obvious popping out at me (yet) in the CSS to cause it. Some interaction btw. position:fixed and transform:translateY?

However, the offset is just a part of the problem. As the <section> has the overflow-y, and the header has position:fixed, the top of the scrollbar is actually behind the header. That's not right either. 

shared/style/headers.css dictates the current markup with the rule:

.skin-organic section[role="region"] > header { ... }

..that prevents using more sensible markup with a scrollable container and the header position:relative. 

I'd like to amend the shared headers.css to allow for an optional scrollable container element inside a section[role=region]. Thoughts?

Comment 4

[Sam Foster [:sfoster] (he/him)]

Scratch that proposed shared/style/headers.css change. Am looking around at the root issue, and at how other apps handle this.

Comment 5

[Sam Foster [:sfoster] (he/him)]

Attachment: Patched settings/style/setting.css

Set tranform: none in the targeted section in settings/style/settings.css, and is explicit about the Y value (which seems to help).

Comment 6

[Sam Foster [:sfoster] (he/him)]

Attached patch 668128 isn't ideal; additional transform functions other than translate will also get blown away. But its the best I could do. See this fiddle for a reduced test case, illustrating the bizarre tranform/position fixed interaction. 

http://jsfiddle.net/sfoster/PXayH/
http://fiddle.jshell.net/sfoster/PXayH/show/

Comment 7

[Fabien Cazenave [:kaze]]

The bug reported by :nhirata should have been fixed a couple weeks ago (Pavel, would you link your PR here please?).

(In reply to Sam Foster [:sfoster] from comment #3)
> Created attachment 667935 [details]
> Screenshot of settings/keyboard offset & scroll issue
> 
> I'd like to take this as my first gaia issue. I read the issue as being the
> offset of the header (e.g. "Keyboard") when you select one of the settings
> in the main screen; it should be top,left 0,0 but ends up being at
> top:~5rem. (See b2g-gaia-settings-796556.png attachment)
> 

Hi Sam, and sorry for the lag. The bug you mention is a different one, it only occurs in Firefox Nightly — not on the device (nor on B2G-desktop iirc) and it’s a platform issue. Would you mind opening another bug for this please?

Comment 8

[Sam Foster [:sfoster] (he/him)]

I thought I had reproduced this in B2G-desktop, but I also noticed this morning that it doesn't seem to be a problem there. That's good, less bugs :)

Comment 9

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Sorry for the late replay, this is my PR :
https://github.com/mozilla-b2g/gaia/pull/5339

Comment 10

[John Hammink]

Otoro daily: 10-11-2012
* gaia: 2667536e3b06e46dd193aa6d76ba08dad2d867be
* gonk: 6ec34aa3d66331054de37eabc594ad923654b27c

Subtitle no longer flows into checkbox.  Marking "Verified".