I have a page that uses border-radius. It doesn't show up rounded in the native Android browser; it shows up with square corners. It shows up rounded in desktop Chrome, IE, FF, etc fine, but not in the native phone browser. Does anyone know if this is a problem with the browser itself, some additional CSS extension that I'm not using, etc?
Here's my CSS (in the demo):
.bigButton2
{
width: 320px; height: 200px; margin: auto;
padding: 20px;
background-color: #521c0b; color: #FFFFFF;
border: 3px solid #e3b21e;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}
I've set up a JSFiddle: http://jsfiddle.net/VJvQA/
I have tried with padding, without padding, with box-sizing, without box-sizing, and it just shows up as sharp corners. Any help or insight would be appreciated.
I realize that someone posted this already under (border-radius style doesn't work in android browser), but he didn't provide any code, JSFiddle, and it was incorrectly answered with a general question without any real answer; I'd downvote it if I could, but I assumed prodviding an actual well-written question would be better. Thanks!
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.
Unfortunately, some browsers just don't support certain HTML5 and CSS3 properties. My advice and the general advice you'll find on the web is design your site so that it functions and looks nice across all browsers, and then go back and add CSS3 and HTML5 elements as an extra.
This is a well designed and laid out table showing HTML5 and CSS3 support across browsers, it doesn't, however, show the support for mobile browsers.
This link, shows support for mobile devices.
EDIT 2019-11-07
With HTML5 and CSS3 widely supported across all modern browsers dating back several years, plus many JavaScript plugins designed to provide polyfills should you need to support much older browsers, this question and my original answer are both severely outdated.
On that note, it's pretty amazing how far we've come in just 5 or so years :)
New answer: HTML5 and CSS3 all the things!
I see this on another topic.
and to work on mobile just do this:
border-collapse: separate;
with border-radius (im also try border-radius separated)
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-collapse: separate;
Tell me if works. Cya
I think your code is not wrong, it can not display on tablet devices by do. background border should have to fix this error you should delete the lines
background-color: #521c0b;
color: #FFFFFF;
or deleting row
border: 3px solid red
I think this is not a bug and I've met a lot of work as above :)
p / s: sorry my english is not very good
Related
So here is the problem I am facing: the website layout in my phone doesnt look the same as I saw on the browser with responsive viewport turned on.
I was looking at the similar questions posted on this forum like this (meta tag problem)
I am self-learning web development and working on a simple website of the game "paper, scissors, rock".
I draw the framework with HTML.
The paper, scissors and rock logos are svg injected by javascript so I can fill it with different color.
The svg styles are done in css.
The combat part would be done in javascript but now I am confused by the layout problem.
So what I expected from desktop(windows) google chrome is like this:
chrome app view
my firend's Android phone google chrome view:
android app view
but what I get from my iphone google chrome:
iphone app view
I think the css and javascript thing would not be a critical point because it works fine on desktop and android phone.
I think it would be a tag problem but I am not able to find answers others mentioned before.
I dont know if it is the difference between ios and android.
I have faced similar issues before. I had tried to create a circle button with purely css (not img or svg). It shows perfectly in desktop web browser and my friend's android phone. But it shows a ellipse on my iphone.
Here is the code I used to create the button:
HTML:
<button id="master-button" type="button" onclick="AddContent(this)">
<div class="button-cross"></div>
<div class="button-cross rotate"></div>
</button>
CSS:
#master-button{
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--white);
border: none;
font-size: 50px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.button-cross{
position: absolute;
top : 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 5px;
height: 30px;
background-color: var(--high-light-main);
}
.rotate{
transform: translate(-50%,-50%) rotate(90deg);
}
Iphone view:
iphone app view
Android:
android app view
Desktop:
desktop app view
I thought it was caused by the different programming language by android and ios. So I thought it will only shows error if I use Safari. But it turns out even I use the same browser (google chrome), it still shows difference on the screen.
Do you guys have any thought about the issue? Do any of you have faced this issue and finally have a solution on it?
Please let me know and discuss more about it. Thank you for the community.
I was playing around with a site that shows an ASCII/ANSI art logo and everything seems to work great in desktop browsers.
Then I wanted to see if it works on mobile devices but here it seems like the whitespaces are of a wrong width.
The part of the website showing the ASCII-art is wrapped in a <div> with following CSS properties:
line-height:1em;
color: #ff791a;
white-space: pre !important;
font-size: 0.7vw;
margin: 20% 50% 0 0;
font-family: 'Druid San Mono',courier, monospace, monospace;
width: 100%;
height: 100px;
I have tried with several variations of fonts like "Druid Sans Mono", monospace (also the monospace, monospace hack), "Courier" and "Roboto Mono" but none of them worked.
I also tried using nbsp instead of just spaces.
changing letter-spacing also did not seem to have the effect I wanted.
Is there any trick to get this to work ?
you can see the site here disconnected.tech
Turns out some gliphs are missing in Google fonts.
A workaround is Adobe's Source Code Pro, which has all characters (including box drawing, which is what I needed). Mononoki should also work.
I include straight from Adobe, not via Google Fonts: https://adobe-fonts.github.io/source-code-pro/source-code-pro.css
It may be possible to tell Google Fonts to include all necessary characters in their reduced Source Code Pro (text= parameter).
I experienced a weird bug in Android´s (6.0.1) Chrome Browser (54.0.2840.68) when it comes to text-shadow rendering with large fontsizes and blur. It was also reported to appear in MacOS Chrome although i could not reproduce it.
I condensed the problem into a small pen for further investigation:
http://codepen.io/quarkus/pen/BQaBGj
This is, in short the styled headline i am trying to render.
h1 {
font-family: sans-serif;
text-transform: uppercase;
font-size: 60px;
margin: 0;
color: white;
line-height: 1.2;
}
h1.shadow {
text-shadow: 0 0 0 transparent, 0px 0px 40px rgba(0, 0, 0, 1);
}
The classes .filter, .fix3d and .fix are just attempts to fix this problem by rendering the headlines in a 3d context (or by creating the shadow as a blurred :before).
This is how it looks an most android devices:
s.codepen.io/quarkus/debug/BQaBGj on the device
Has anyone ever experienced that kind of rendering and can point me to a solution ?
Thanks
Markus
EDIT: forgot one thing. it occurs only if the page is "scaled" either by the user itself or by stting an meta-tag like:
<meta name="viewport" content="width=device-width, initial-scale=1">
as it is in the pen.
I'm definitely getting this on Browserstack devices (Galaxy and Nexus phones), I've not seen it on a device, but I don't have tons of devices to check.
However what fixed it for me was transforming and blocking the text:
.text {
transform: translateZ(0);
display: inline-block;
}
Not an excellent fix as I need my text to display: inline but it works.
I have some CSS and HTML where the font-size is explicitly styled to be 13px, and for the most part it stays that way, but occasionally Chrome on the Nexus 7 sometimes displays a part of the same page as 14px;
Unfortunately, I have been unable to recreate the issue in jsfiddle, so I'm not sure what is going on.
Some if the styles I use to influence the font-family and font-size can been seen at my attempt to recreate the issue at http://jsfiddle.net/K9hyG/2/.
When using the Chrome debugger, I can see the following in the Computed Style for one of the offending paragraphs:
border-collapse: separate;
color: rgb(51,51,51);
display: block;
font-family: Optima, Lucia, 'MgOpen Cosmetica', 'Lucida Sans Unicode', sans-serif;
font-size: 14px;
font[size="2"] - 13px default.aspx:427
body - 13px default.aspx:2
height: 36px;
text-align: left;
text-shadow: rgb(255,255,255) 0px 1px 0px;
width: 877px;
The text-shadow is generated by my usage of jQuery Mobile. In the Chrome debugger, two instances of the text-shadow directive appear. One inherited from div.ui-page.ui-body-c.ui-page-active (ui-body-c is the activating component) and the other from body.ui-mobile-viewport.ui-overlay-c, (ui-overlay-c is the activating component), but both definitions from the same section of CSS in the theme file.
If I deactivate one of them, the offending paragraph actually changes to 13px in Chrome Debugger, but still looks the same on the device. If they are both deactivated in Chrome Debugger, then it goes back to 14px. This still happens, even if the text-shadow set to rgb(255,255,255) 0px 0px 0px.
I've seen this post, but that issue is largely unresolved as well.
A colleague of mine has discovered the answer. It looks like I am the unwitting victim of Font Boosting
As per the link, Font Boosting can be disabled by providing max-height: 1000000px on the element in question or on body, body * for all elements.
Your problem is likely due to Chrome's text scaling setting, which sets text at a particular scale for accessibility reasons. A lot of users use this who struggle to read small text on their mobile. You cannot fix this and shouldn't try to resolve it, especially with sites that support mobile devices.
I recommend you either ignore it or modify your CSS so that it supports slightly differing text sizes.
After some tests this rule helped me out. Must be added either to the element containing boosted text or it's parent depending on the div/table structure.
element or parent element {
/* prevent font boosting on mobile devices */
width: 100%;
height: auto;
min-height: 1px;
max-height: 999999px;
}
Maybe the width and heigth values must be corrected according your needs.
The Android browser, since 2.2, supports fixed positioning, at least under certain circumstances such as when scaling is turned off. I have a simple HTML file with no JS, but the fixed positioning on three Samsung phones I've tried is simply wrong. Instead of true fixed positioning, the header scrolls out of view then pops back into place after the scrolling is done.
This doesn't happen on the Android SDK emulator for any configuration I've tested (2.2, 2.3, 2.3 x86, 4.0.4). It also doesn't happen when using the WebView in an app on the Samsung phones: in those cases the positioning works as expected.
Is there a way to make the Samsung Android "stock" browser use real fixed positioning?
I've tested:
1. Samsung Galaxy 551, Android 2.2
2. Samsung Galaxy S, Android 2.3
3. Samsung Galaxy S II, Android 2.3
Sample code:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width,height=device-height">
<style>
h1 { position: fixed; top: 0; left: 0; height: 32px; background-color: #CDCDCD; color: black; font-size: 32px; line-height: 32px; padding: 2px; width: 100%; margin: 0;}
p { margin-top: 36px; }
</style>
</head>
<body>
<h1>Header</h1>
<p>Long text goes here</p>
</body>
</html>
The expected behaviour is that the grey header fills the top of the screen and stays put no matter how much you scroll. On Samsung Android browsers it seems to scroll out of view then pop back into place once the scrolling is done, as if the fixed-positioning is being simulated using Javascript, which it isn't.
Edit
Judging by the comments and "answers" it seems that maybe I wasn't clear on what I need. I am looking for a meta tag or css rule/hack or javascript toggle which turns off Samsung's broken fixed-positioning and turns on the Android browser's working fixed-positioning. I am not looking for a Javascript solution that adds broken fixed-positioning to a browser that has no support whatsoever; the Samsung fixed-positioning does that already, it just looks stupid.
Maybe you could consider a different approach that doesn't require fixed positioning...
Add scrolling to the paragraph element instead of on the (default) body element. You can then position the paragraph element just under the header. This will ensure that the header always displays at the top of the page yet allowing you to scroll through the text in the paragraph.
h1 {
height: 20px;
}
p {
position: absolute;
top: 20px;
left: 0px;
right: 0px;
bottom: 0px;
overflow-y: auto;
}
I think the best way for android 2.2 browser implement javascript.
You can find more info via this link. It is about fixed positioning in all mobile browsers.
http://bradfrostweb.com/blog/mobile/fixed-position/
In his comment to Brad Frost's article Matthew Holloway suggests a solution along the lines of Anita Foley's answer, but with a polyfill for overflow:auto, where not supported. Check it out here:
http://bradfrostweb.com/blog/mobile/fixed-position/
It's not Samsung's Android broken browser, it's Android 2.2 which has the broken support.
In general as you might know position:fixed was and in some cases still is pretty broken in many mobile devices/systems.
To answer to your question, there is no "toggle or meta tag" that will "turn on the Android browser's working fixed-positioning". If a browser doesn't have support of something, then there's no "toggle" to "switch" it. It's not a feature.
Otherwise, you can use http://cubiq.org/iscroll-4 which emulates it.
(edit: some facts)
According to http://caniuse.com/#search=position:fixed Android 2.2 and Android 2.3 have PARTIAL and not full support of position:fixed. (partial support seems buggy support)
An Android simulator is not and will never be identical to an Android native browser, as much as IETester for example is not the same as IE native (there are differences)
Motorola ATRIX 4G does NOT have Android 2.2 but Android 2.3 ( http://www.motorola.com/us/consumers/MOTOROLA-ATRIX%E2%84%A2-4G/72112,en_US,pd.html?selectedTab=tab-2&cgid=mobile-phones#tab )
You are suggesting that SAMSUNG introduces a proprietary hack or mod that breaks the otherwise working support of position fixed in the Android browser. This seems highly unlikely, regardless of the 3 above points.
The answer is actually simple: There is partial (buggy) support and your only solution is to use a javascript library that replaces or "fixes" the hole.