Issue on icons and list view rounds #5231

Closed
nayahun2 opened this Issue Oct 29, 2012 · 9 comments

4 participants

@nayahun2

I am migrating jqm to the 1.2.0 final version and found out wired behavior on icons and listview rounds

Blackberry pic

When you see the icons and rounds of the buttons, you can see the gray background color with BlackBerry Torch 6.x. This is not being seen till the 1.2 beta but from the 1.2 rc 1 it appears.
you can test it by comparing two versions

http://jquerymobile.com/demos/1.2.0-beta.1/
-> it looks fine in bb 6.x

http://jquerymobile.com/demos/1.2.0-rc.1/
-> you can see issues in bb 6.x

it is not easy to see clearly in this picture but it looks very ugly, do you think it can be fixed and released again? or there will be some way avoiding this by putting some codes?
Please let me know if you have any information you need more

thank you in advance.

Hoon

@jasondscott jasondscott was assigned Oct 29, 2012
@jasondscott

Hi @nayahun2 I have tried many builds for BlackBerry Torch 6.x trying to reproduce this issue and so far I am unable to reproduce it. Can you tell me which bundle and build numbers you have?

To find bundle and build info
Options -> Device -> About Device Versions

You should see
6.0 Bundle (v6.0.0. ...

Thanks,

Jason

@nayahun2

BlackBerry® 9800 6.0 Bundle 2475 (v6.0.0.546, Platform 6.6.0.207)
this device has the issue with black color issue (Issue: #4828) which was resolved from the jqm version rc 1

BlackBerry® 9800 v6.0.0.246, (Bundle 695, Platform 6.4.0.105)
This one started to have the issue (one that I raised above) with the wired background from the jqm version rc 1

I think the change you made resulted in another issue for another version of BB 6


Enabled box shadow support for BlackBerry OS 6+ (Issue: #4828)
– Fixed a text input issue on Blackberry 6 browsers where the input became black when it got focus.

(#4828)

Please let me know if you need more info
thank you in advance!

Hoon

@nayahun2

I found it by myself

.ui-mobile-nosupport-boxshadow .ui-focus,
.ui-mobile-nosupport-boxshadow .ui-btn:focus,
.ui-mobile-nosupport-boxshadow .ui-link-inherit:focus {
outline-width: 0px;
outline-style:none !important;
}

@toddparker

@nayahun2 - I just wanted to confirm what you're suggesting. Looks like you're changing the styles for this style in the theme:
https://github.com/jquery/jquery-mobile/blob/master/css/themes/default/jquery.mobile.theme.css#L1058

/* ...and bring back focus */
.ui-mobile-nosupport-boxshadow .ui-focus,
.ui-mobile-nosupport-boxshadow .ui-btn:focus,
.ui-mobile-nosupport-boxshadow .ui-link-inherit:focus {
    outline-width: 1px;
    outline-style: auto;
}

Is that right? If you want to send this in as a PR, we'll give it a look.

cc: @uGoMobi

@nayahun2

Hi Todd,

I don't know whether you remember me but
I am the Korean guy from Paris, working for an international organization

we met in the last year boston jquery conference, specifically, during lunch time
we had lunch together with someother people It's nice to talk to you since then

anyway yes,

.ui-mobile-nosupport-boxshadow .ui-focus,
.ui-mobile-nosupport-boxshadow .ui-btn:focus,
.ui-mobile-nosupport-boxshadow .ui-link-inherit:focus {
outline-width: 1px;
outline-style: auto;
}

change made like this ->

.ui-mobile-nosupport-boxshadow .ui-focus,
.ui-mobile-nosupport-boxshadow .ui-btn:focus,
.ui-mobile-nosupport-boxshadow .ui-link-inherit:focus {
outline-width: 0px;
outline-style:none !important;
}

I put this in the web page rather than changing the jqm css file
by doing that, the issue has been solved for the both blackberry devices.

if you need more information please let me know

thanks

Hoon

@jaspermdegroot
jQuery Foundation member

@nayahun2

Could you test the following on your BB device, please:

.ui-btn:focus, .ui-link-inherit:focus {
    outline-width: 0; /* change outline to outline-width  */
}
.ui-mobile-nosupport-boxshadow .ui-focus,
.ui-mobile-nosupport-boxshadow .ui-btn:focus,
.ui-mobile-nosupport-boxshadow .ui-link-inherit:focus {
    outline-width: 1px;
    /* remove outline-style */
}

Thanks!

@nayahun2

I tested it by putting those code in a page with the devices above.

with beta version jqm

  • BlackBerry® 9800 6.0 Bundle 2475 (v6.0.0.546, Platform 6.6.0.207)
    the same black background in the text box issue appeared

  • BlackBerry® 9800 v6.0.0.246, (Bundle 695, Platform 6.4.0.105)
    It is fine

with final version jqm

  • BlackBerry® 9800 6.0 Bundle 2475 (v6.0.0.546, Platform 6.6.0.207)
    It is fine

  • BlackBerry® 9800 v6.0.0.246, (Bundle 695, Platform 6.4.0.105)
    Wired background appeared again at this time

I personally decided to use the solution I found
By doing that there will be no the focus effect but I will not have any wired issue for many different types of black berry devices.

Thank you

Hoon

@jaspermdegroot
jQuery Foundation member

@nayahun2

Thanks for testing this. Too bad it didn't work.
I understand you prefer the solution you came up with, but as a framework we can't just disable this focus style in general for browsers that don't support box-shadow.
For 1.4 we are planning on making changes in active and focus styling and look into this issue as well.

@jaspermdegroot
jQuery Foundation member

I look at changes between 1.2.0 beta and RC1 and there is one relevant commit 651e546. So before this commit you probably didn't see rounded corners on BB6 in listviews.
The problem is that we can't reproduce the issue on the BB devices and emulators we tested this on. It seems to be a device specific issue. In JQM 1.4 we changed listview markup and apply focus style to the <a> and not the <li>. I hope this resolved the problem. If not, we also reduced the default border-radius so the problem should be less visible.
Because it seems to be an edge case within a platform with a very small marketshare I am going to close this ticket as (if still an issue) won't fix.

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