Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Galaxy S4 stock browser CSS3 border-radius support?

This is a very specific question, that I can't find any documented evidence to support, but have rather a lot of empirical evidence, although only based on a single phone.

The single Galaxy S4 that we have available in the office doesn't appear to have support for the border-radius property in it's stock browser. I've tested several different websites, and have tried all different browser versions of the property (webkit, moz, etc), and it just don't seem to support it.

Because we only have 1 S4 available (I've asked around, and no one else has one or knows anyone who does), and because rounded corners via the border-radius property was such a big feature of CSS3, I find it hard to believe that they would have removed it deliberately, which leads me to believe that either:

  1. I've found a bug with the stock browser, or
  2. It's device specific to the only phone we have available.

So, has anyone else come across this before, or does anyone have an S4 available to them that they could check on http://css3test.com/ to see if border-radius is supported?

like image 951
Dark Hippo Avatar asked Jun 19 '13 08:06

Dark Hippo


People also ask

Can I use CSS border radius?

You can give any element “rounded corners” by applying a border-radius through CSS. You'll only notice if there is a color change involved. For instance, if the element has a background-color or border that is different than the element it's above.

Why border radius is not working?

If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div's overflow can give the impression that the border-radius isn't working.

What is border radius css3 property used for?

The border-radius property is specified as: one, two, three, or four <length> or <percentage> values. This is used to set a single radius for the corners. followed optionally by "/" and one, two, three, or four <length> or <percentage> values.

How do four values work on border radius in CSS?

CSS Syntax Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.


2 Answers

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

like image 177
aviomaksim Avatar answered Oct 19 '22 23:10

aviomaksim


I work with someone who received the May 30th firmware update and is seeing this same issue as well as some other CSS issues. I've not yet received that update and I'm on the April 24th version and I am not seeing this issue. Concerned that this is something introduced in the latest update.

like image 23
Snorkeler Avatar answered Oct 20 '22 00:10

Snorkeler