Galaxy S4 Stock Browser CSS3 Border-Radius Support

Galaxy S4 stock browser CSS3 border-radius support?

I had the same issue!
You can fix it like that:

border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

PS. I hate such updates

border-radius not working in modern native Android browser

Turns out, this issue is specific to the Android browser on the Galaxy S4 and S4 Active. It looks like they've broke support for the condensed border-radius property, but if you specify each corner individually, it works fine. I'm posting a bug report to Android. So, if you do this:

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

It works fine; if you just have border-radius: 10px; it gets ignored.

This was answered under this post:
Galaxy S4 stock browser CSS3 border-radius support?
I'm just repeating it here. But I did test their solution, and it is working fine now on the Galaxy S4 Active as well.

Image with border not ideal

Instead or border use box-shadow

box-shadow: 0px 0px 0px 5px red;

demo - http://jsfiddle.net/Lkdyv2jj/5/

img {

  width: 100px;

  border-radius: 50px;

  box-shadow: 0px 0px 0px 5px red;

}

<img src="http://zhangwenli.com/YooYo/img/avatar.png" />

Browser support for CSS3 vs CSS2? More importantly, design against CSS2 or CSS3?

More importantly, should we design with CSS2 in mind or CSS3?

it's not an either or scenario, probably never will be, you can't have one without the other - CSS2 should be your base, CSS3 (modules) should be your enhancements, rounded corners, multiple backgrounds etc.. you can enhance the non CSS3 browsers with JS libraries to help but it should always degrade to a perfectly usable CSS2 site no matter the browser or the scripted enhancements

• so CSS2 with a bit of CSS3 fun ;)

Custom mobile button icon with transparency issue

The problem is that jQuery Mobile adds a semi-transparent background and a border-radius to the icons (.ui-icon). There is a known bug on Android 4.2.2 (Jelly Bean), in which the background color of an element displays outside of the element's border when the border-radius property is specified. A comment on the ticket states that the issue "seems to be fixed in the current beta (29.0.1547.23)", however this fix may not appear in a wide-spread roll-out for some time.

The CSS fix for this issue is to set the background property of the icon to none before setting the background-image.

Here is the updated CSS style:

.ui-icon-main-nav {
    background: none;
    background-image: url(/presentation/generic/includes/images/mobile/main-nav-icon.png);
    -moz-background-size: 17px 17px;
    -o-background-size: 17px 17px;
    -webkit-background-size: 17px 17px;
    background-size: 17px 17px;
    height: 17px;
    width: 17px;
    border: none;
    margin-top: -2px;
}

See the updated fiddle.

This is an unfortunate issue, as the only resolution is to remove the background color, or add the background color into the image, itself.

---

Related Topics