I need to render the Black Diamond Suit (♦, U+2666) the same on multiple browsers. Unfortunately, this is an emoji as well, meaning it renders like this:
Source
when I want it to always render like the "browser" image (top left).
This is especially frustrating on iOS and Android because it's not rendered as black.
Unfortunately, Font Awesome doesn't include a usable replacement. The nearest is "Black lozenge", U+29EB ⧫︎ but it's a bit stretched.
Is there a way to force the mobile browser to render it like a desktop browser would?
Looking at the spec found on fileformat.info there is a text version of the black diamond that can be used instead:"\u{2666}\u{FE0E}"
Use this in css
color: transparent;
text-shadow: 0 0 0 black;
2023 observation: "\u{2666}\u{FE0E}" doesn't seem to work on my Android Chrome - displays red diamond.
"\u{25C6}" does work here - black diamond is displayed on phone.
HTML code ◆
I'm working on a webapp also to be used on small smartphones. One of the fields in a form is a time input field. I need this to be nice and small and a width of 55px does the trick on most OS and browsers.
<input type="time" value="12:34" style="width:55px">
However, Android Chrome always has some additional space:
When I add a "-webkit-appearance: none" the arrow disapears but leaves an empty space, so my time is still chopped off.
I have tried many controlls and those solved other issues in Chrome on my desktop (spin-button, clear-button, etc). But nothing I found removes it in Android Chrome.
Does anyone know how to get rid of this?
Tested on Android 5 and 6 both with Chrome 56.
Quick example https://jsfiddle.net/nm97kvk0/2/
I tried this
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
with
::-webkit-inner-spin-button,
::-webkit-outer-spin-button,
::-webkit-clear-button,
::-webkit-calendar-picker-indicator
It works with desktop. There is no arrow in Android Chrome, but background under arrow is still there and overlay part of last digit(
Desktop Chrome
Android Chrome
Summary:
I've been developing a mobile web application for a client and everything was going smoothly until an Android update seemed to ruin everything. The webpage is now rendering as if the window/body (DOM elements) height is much less than the actual screen height. The reasoning for this thoery is that the page is built around absolute positioned elements, thus elements with bottom: 0 should be positioned at the bottom of the page (unless parent is relative of course, which it isn't).
The issue seems to only occour when a device is using a specific version of WebKit (so far issue only been spotted on Android devices). More specifically between version 534.13 to 534.30 (see debugging section below)
About the layout:
The site is using absolutely positioned elements to attach header and footer content to the top and bottom parts of the screen. A jQuery(window).load() event is used to calculate bottom and top numbers in order to position the elements correctly in relation to each.
I know the website is not perfect, no need to mention it (I was new to
mobile optimised websites and went along with his ideas without
questioning them).
See the current implementation on: http://v-tone.com/ (note: this issue is not for website visits or any personal gain. Also the page can change at any time)
The problem:
The problem can best be illustrated by showing you a working and not working example:
Working: http://www.kjetil-hartveit.com/_misc/vtone/working.jpg
Not working: http://www.kjetil-hartveit.com/_misc/vtone/notworking.jpg
As you can see the implementation works in Android 2.2 but not in the new 4.0.3.
Debugging:
I have been debugging using jsconsole.com (remote debugging) and console logging and whatnot but haven't discovered any significant differences in the dimensions and calculations between a working and a faulty rendered site.
I have also tested several different implementations using webkit and also other rendering engines to try to pin down the problem. The results indicate there might be something buggy between WebKit version 534.13 and 534.30.
You can see all the testdata here: http://www.kjetil-hartveit.com/_misc/vtone/Render%20comparison.xlsx (note yet again that this link may cease to exist at any time)
Solution?
My client really wants the site launched as fast as possible and so do I. We're not sure if it's worth it waiting for a possible Android update.
Does anyone know a quick fix to the problem?
Can anyone confirm it's a WebKit issue?
Other suggestions?
I had the same issue with WebKit 534.30 on Samsung Galaxy S3 with Android OS.
I made an accordion menu using CSS3.
<div class="wrapper">
<ul class="accordion">
<li>
<button>Button Caption</button>
<div>
<p>Some Information</p>
</div>
</li>
</ul>
<footer>Some information in footer</footer>
</div>
After tapping on button the li-element changes its height using pure JavaScript (= button height + div height).
The problem was that opened li-element overlaped the footer element content.
The solution I made was to add translate3d and scale(1) to every interactive element:
.wrapper {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: scale(1);
}
.accordion > li {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: scale(1);
}
.accordion > li > button {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: scale(1);
}
Then accordion menu began to work fine even in webkit 534.30.
I am developing mobile apps using HTML5 & CSS3 using PhoneGap. My problem is that whenever I touch a textbox on my webpage running on the Samsung Galaxy Tab 10.1 (Android v3.1), it shows the keyboard but the page goes black for a fraction of second. At times, it flickers for a while showing black background and then restores itself.
I even tried with a simple page with a single input type="text" and it even happens with the same.
Anybody faced a similar issue and have had a fix for it?
Any help is much appreciated.
Thanks.
UPDATE 1:
As I said above, the black flickering even happens with the app containing a simple page with a single text box. Following is the code:
<!DOCTYPE html>
<html>
<head>
<title> Flickering Problem </title>
<style>
html, body{
-webkit-backface-visibility: hidden;
overflow: hidden;
-webkit-transform: translate3d(0,0,0);
}
</style>
</head>
<body>
<input type="text" width="200px" height="100px" />
</body>
</html>
I tested this on my Android tablet, and the flickering was as with a full fledged web page.
I tried adding certain CSS attributes suggested here on SO for similar problem which claimed to solve, but did actually help.
It is worth noting that the black flickering is happening whenever we try to enter any text in the textbox, and I am currently not doing any animation(s) / transitions using CSS3.
The solution is to enable hardware-acceleration in the android manifest.
<application android:hardwareAccelerated="true" ... />
This enables double-buffering through the GPU and resolves the problem.
Note that this option is only available in Android 3.0+.
Here's the background for all you techies: :)
We have recently been testing a functional jQuery Mobile HTML5 app wrapped with PhoneGap Android 2.x phones to the Galaxy tab 10.1.
We have seen something very similar, with the exception that we have defined a splash screen for our app.
What we see is that when an input field is given focus, the screen flashes up the splash screen momentarily. Very annoying! To verify if this is the same problem, define a splash screen for your PhoneGap app and see if the screen flahes your image instead of a black background.
Knowing something about what's going on with PhoneGap and the Android WebView, this is my best estimation of what is happening:
PhoneGap loads the main App activity with a black background and displays the splash screen (if defined) in that initial window.
PhoneGap then starts the WebView and opens it on top of the main Window.
When a field is selected, the Android invalidates the component wach time it updates it based on a focus event or keypress, or whatever, and Android redraws everything. So it redraws the main window behind the WebView and then redraws the WebView with the HTML page content on top of it. Since the device is not properly double-buffered, you see all of this redrawing in all its ugly glory right in front of your eyes.
We have seen serious glitches with Android web forms on some Android 2.x phones we have tested, and this looks like yet another glitch, but this time on the Galaxy Tab running Honeycomb (3.0).
We have attempted to use CSS -webkit-backface-visibility to resolve issues on some phones when experiencing flicker in the past - but this has caused serious rendering issues in HTML forms. Be warned! In theory this should be a viable fix to introduce some double-buffering into the mix, but in our experience it causes more problems than it solves.
This is either a problem with the Android OS or Phonegap.
If it's a problem with Android, this can only be fixed with a software update to the OS. You can test this out by going to a regular website with a text box and tapping on it to enter text. If it flickers, it's probably the OS.
If it's a problem with Phonegap, it might be fixed by doing a specific search for that. Looking at the top results in google, I've found this:
http://www.senchatouchbits.com/6/fixing-flickering-of-animations-in-phonegap.html
This suggests you put -webkit-backface-visibility: hidden; into your code. While I see you put it into the html, body tag, try putting it into the * tag, ex:
*{
-webkit-backface-visibility: hidden;
}
Note: The link puts the style onto a .x-panel tag, I'm not sure if that's specific to their code or to Android.
Here's another link that you should look into for a fix: http://code.google.com/p/jqtouch/issues/detail?id=301
I added a demo page:
http://jsbin.com/upixel/
From your code, the input is big (width and height need to be set by css) - if that is the case, the black color may come from the default tap color and the flickering may come from blocking (phonegap or script's fault)
see will this solve your flickering:
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
Live Demo
Hope it can help
I have had the same problem and at the beginning I thought it had to do with the manifest part of the app.
After hours of troublesolving this is what worked for me. (Still haven't had the problem after an hour of testing on the phone. A samsung galaxy s2, version 4.0.3. And for the app I'm using verison 2.1).
html{background:url(img/brownBG.PNG) repeat 0 0;}
I just put a background on the html and now it works fine. If you try this solution, please comment if it works for you or not.
EDIT: I also have this css rule which is important for it to work
*{-webkit-backface-visibility: hidden;}
If anyone is still looking for a solution to this, I found the support ticket for this bug:
http://bugs.dojotoolkit.org/ticket/15365
As of today, the best workaround consists in using the adjustPan Android option plus the above subclass of ScrollableView? (if you can afford creating an APK dedicated for Android >= 3, you can also add the hardwareAccelerated option). This solves all troubles except the field duplication on Android 4. Of course, if the ScrollableView? is not really mandatory in the view containing text fields, replacing it by a View is even better.
In conjunction to the solutions mentioned already (i.e. -webkit-backface-visibility: hidden; and android:hardwareAccelerated="true"), I have also tried either one of the following:
(Applicable only on Android version >= 3)
AndroidManifest.xml
android:windowSoftInputMode="adjustPan"
MyActivity.java
this.runOnUiThread(new Runnable() {
public void run() {
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
}
});
I have a proven solution for this problem, I was also facing same problem but I solved it myself.
First create a field inside body and make it hidden or you can make it hide behind a div using z-index so that it won't be visible.
<script>
$(document).ready(function() {
document.getElementById('example').value='';
});
</script>
<body>
<div style='z-index:50;position:absolute;height:100%;width:100%;'>
Your page matter here</div>
<select id='example' style='z-index:10'>
<option value=''>a</option>
</select></pre>
</body>
The moto is that we have to set this select field when the page load, and doing this will stop the flickering for sure...try it guys.....it worked for me
I had a same problem on Samsung Galaxy Tab 10.1 like yours.While I upgraded android version from 3.1 to 4.0.3(using Cyanogenmod 9.0 nightly build 20120302) and without any code change, the problem was solved on my device.
So I guess that it's an issue of webview component on Galaxy Tab android version.
I can't say this will fix your problem, but it is worth a shot. Check your AndroidManifest.xml file for android:configChanges="orientation|keyboardHidden" in the activity tag (under application).
I'm trying to turn off the default Android web 'highlighting' (the -webkit-tap-highlight-color style 'fix' that is recommended everywhere) - this works great on most devices, but not my Galaxy Tab 10.1 - anything with a 'click' handler, will always get highlighted in the default 'dark' colour when it is 'clicked' in the browser.
eg.
I have this in my CSS :
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
then using jQuery setting up a 'click' hander on a div :
< div id="test" >some kind of contents< / div >
with code such as :
$("#text").click(function(e) { alert("Hello !") } );
with that simple code, running in the Galaxy Tab 10.1 browser, you always get the 'highlight' on the div, it appears to ignore the style completely ?
Anyone have any ideas ? It appears that by using 'touchstart' and 'touchend' events this goes away depending on the 'level' that I capture those events at, but that seems like overkill - is there anything special about the Galaxy Tab browser ? I've tried searching, but there's so many combinations of terms to look for I'm lost :(
Thanks
Chris
try giving it any any color other than the default! e.g. -webkit-tap-highlight-color: rgba(58, 52, 222, 0.5);
On some Android devices where I have tried to change the default highlight color, it ends up making sure the color never works!
-And once you've checked that out, try adding !important at the end of the color, that one seems to force back the default color!
Add this to your CSS. Is tested and working on Samsung Galaxy S9.
html {
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
-webkit-tap-highlight-color: transparent !important;
}