The problem is following - on mobile Chrome (Google Nexus 5) my box-shadows have an ugly visible border, instead of a seamless transition into background underneath. Is there any way to correct that? It's not visible on any of the desktop browsers. Even Chrome Device Emulator displays it properly.
Any ideas? Prefixing does not help... I though about substituting the shadows with linear-gradient background, but it requires additional, non-semantic markup and is hella tricky in comparison to comma-separated shadows.
http://i.stack.imgur.com/FRc3C.png
EDIT: as mentioned in comments (thanks, #vlrprbttst) - it's not an inset shadow.
I have a fixed header and footer, which need to drop shadow on the background. The problem is, I can't really change the layout, I need to modernize it. Previous designer used pngs as backgrounds, I figured that it's gonna be better if I replace all images with CSS3 to reduce the amount of HTTP requests. Now I get complaints that it's ugly - justified ones.
Related
First, hello to everyone, I'm kinda new here, altough this site has helped me with lots of stuff.
Here's my problem, I've made images in 's with text behind them, so that when you hover with your pointer over it, the image slides to the side and you can read the text. Pretty simple. Now the problem that I'm having is that when I lower the screen size(eg view it on an Android), the responsive design kinda doesn't work for those images because there's some weird spacing to the left, even though the image can fit on that screen size.
Here's the site with the problem (I use it for learning purposes :)): This
your responsive works fine (bootstrap I guess). The problem is you have a fixed width in your .slide1, .slide2, .slide3 that is messing the 33.3333% width of your col-sm-4 . Basically you need to use mediaqueries to adapt your animation.
adding overflow:hidden to col-sm-4 will show you better what is happening, and adding to your slides max-width:100% may be the first steps to fix your web. Later your problem will be the image size
I am developing a card game in HTML, JS and CSS using the Meteor platform. I am using ♥ for the hearts suit and ♦ for the dimonds suit. The color is set to red using color: #FF0000; in CSS. The font-family is set with font-family: 'Times', serif;. On a desktop PC, Mac or iPhone these show up as red icons, but on an Android using Chrome they show up as black. However, the rank is still displayed as red which leads me to believe this is specific to the icons themselves.
Before displaying the suit string I run the code through the SafeString function in Spacebar.
suitString: function(suit) {
var suits = {'H': '♥', 'S':'♠', 'D':'♦', 'C':'♣'}
return Spacebars.SafeString(suits[suit]);
}
I imagine it has something to do with the font that is used to render the icons on Android, but I have been unable to figure out exactly why this is happening. Or it could be something specific to the SafeString function.
Can anyone enlighten me and is there a way to ensure the color on all devices without using images for the suits?
Thanks!
I think this is an Android 5.0.x font rendering bug. It happens on web pages and within applications. So far I've only seen it on Android 5.0.1
I can't reproduce it on android 5.1.0 and 4.2.x
I really drove me mad. At first I though html tables wouldn't accept color.
Here is my test page: http://ibob.github.io/tests/html/
If you open it on an Android 5.0.1 device, the solid red suits won't be colored.
The empty suits look bad, so I guess going with images is the only sensible solution.
EDIT:
Actually after more digging, this seems to be a TouchWiz issue (ie Samsung only).
In their TouchWiz updates after 5.0.1, Samsung changed the font rendering of solid suit colors to something like emoji - immune to coloring. Apparently, it can't be reproduced on non-Samsung devices but it's reproducible on every one with an Android version bigger than 5.0.0.
Note that HTC have done a similar thing, but kept the colors of solid suit colors. However with modern HTC devices you can't draw spades or clubs with a color other than black, and hearts and diamonds with a color other than red.
Other device brands with their custom android mods may have similar issues.
I have the same problem when using ♥ (black heart suit, as described in http://www.w3schools.com/charsets/ref_utf_symbols.asp)
In PC, you can change the color with the css color attribute. However, in android, it shows in black regardless the color you specify.
I suspect that is a problem of the android browser rendering that black heart suit with that black icon.
I used ♡ instead (white empty heart) which takes css color attribute not only for PC but also for android browser.
Alternatively, an image with the desired color or an svg built in the code could use any css color.
I’ve used Fontastic.me to create an iconfont. It works great except in the native browser of Android 4.2.2 and 4.3 (eg: modern Samsung tablets).
In these browsers, the characters of the entire font have no width. This occurs with every font made with Fontastic.me (even the fonts it supplies itself). This is a major problem when centering the icons (horizontally).
I've set up a webpage to test it: http://ajuin2013.boondoggle.eu/fontastic-streamlineicons/icons-reference.html. The pink color shows the width of the character.
The following screenshot compares the normal behaviour with the AndroidBrowser-behaviour :
http://ajuin2013.boondoggle.eu/fontastic-streamlineicons/fontastic.png
I’m sure it’s because of the Fontastic, because when i use Icomoon as fontgenerator, the problem doesn’t occur. I've also notified the owner but he says he can't look into it because he doesn't now how to install an Android Emulator on his Mac.
Does anyone has a clue to what's happening here? What causes the character-space to collapse?
I had the same problem yesterday. I resolved it with a little bit of a work around. Like you said, when you want to center the icon with text-align:center; it ends up more to the right. If you put it to the left, it aligns left as intended. So I made the speudo element exactly the same width as the icon and centered the speudo element with margin: 0 auto; In that case you can leave the text-align to the left.
I know it's not the perfect solution, but for now it works for me and maybe also for you.
I had the same problem and resolved it by using icomoon.
For a mobile website project I encountered a problem that (only on android browser), the gradient to transparency (smooth outer glow) does not look clean. Instead you can see clear edges around it. Strangely though it seems to disappear for as long as I scroll the page.
http://i.stack.imgur.com/qGmXj.png
The problem does not occur on any Desktop Browser or on iOS Devices.
Thanks for your help!
UPDATE:
I found out, that the problem is called PNG Banding and only occurs with PNG-24 (24 bit) on the 16bit displays. As I cannot go with an 8-Bit Image (which would render fine) because of the quality loss, I still did not find a solution for the problem
I have also not found a solution to this problem.
In my case, I had a PNG with a white-to-transparent gradient that I would overlay on top of elements with solid background colours to give them a "shine" up top. No matter what I tried, there would always be banding on the Android browser (and no other browsers at all).
Before I even tried the PNG gradient, I tried doing so with CSS3, but that suffered from the same issue.
In the end, I was forced to create opaque PNGs with the white-to-transparent gradient layer merged with the colour layer. This meant I had to do the Photoshop equivalent of "hard-coding" each possible shine/shadow with whatever colour it would be on top of. Not the best solution, but it displays fine on Android browser without any banding and I needed do something, so yeah. :|
In photoshop, Save For Web. Choose PNG-8 bit. Dither Option: choose pattern or noise. This will smooth out the gradient banding.
I am developing a mobile site, so I'm using CSS to make things as liquid as possible.
I'm having an odd difficulty. Within a div container, I have a <p> that is supposed to fill the width of the div. I've tried width:auto, width:100%...nothing seems to work on Android Browser. Here are examples:
iOS (Correct):
Android (Incorrect; not fully spreading; added more text than iOS version so you can see what I'm talking about):
Both screenshots taken from respective emulators.
Here is the odd thing, though... If I give the class applied to these <p>'s a background color, the Android browser then allows the <p> to fill the full width of its parent div (looks identical to iOS). The really odd part, though, is that if I make the background color transparent (I thought I had it tricked lol), then it goes back to doing as shown in the example.
So, I have a <p> only properly referencing its CSS if it has a background-color applied... am I stupidly overlooking something, or is this some issue with Android Browser? Any ideas how to fix it?
Thanks for your time.
While it may not be the best solution, I finally just made an "invisible" transparent png and set it as the <p>'s background, and that fixed the issue... if you can call it fixing. :) I have to assume it is some kind of error in Android's Browser, as I tried this in every browser, desktop and mobile.
It is the intended behavior of Android phones. It will enhance the readability of copy text, since you are not forced to scroll sideways if you pinch zoom the page.
It can be managed on your own phone maybe in the browser's settings, but that is not the solution you want.
It can be 'fixed' by the workaround of applying a background-image to the element you want.
This can be done with a base64 encoded data url:
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
In your mobile browser's settings, look for something called "Auto Fit Pages" and disable it. This setting (in Android) is ON by default. Turn it off and your text will flow as it should.
the div or any element above this could be the issue.
if you give fixed width to the p element, does it work well ?