I'm struggling to remove unwanted box shadows and gradients from elements such as including <input type="text">, <textarea>, <select>, and <button> in the latest version of Firefox for Android (v18). The desktop counterpart of Firefox for Ubuntu and Windows does not exhibit the same issue.
Safari on iOS also adds styling to make certain elements appear more native-like, however resetting the unwanted styles was fairly easy thanks to -webkit-appearance: none.
Mozilla's Developer Docs do mention support for -moz-appearance: none, however it does not seem to work as intended on Firefox for Android.
This issue is well documented on bootstrap, removing the background image has worked for me
https://github.com/twbs/bootstrap/issues/8702
background-image: none;
You need to set
background:#fff;
border:0;
border-radius:0;
box-shadow:none;
etc
Override the Firefox-specific button background gradient e.g.:
background: -moz-linear-gradient(top, #ffffff, #ffffff);
Related
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
Okay, so I am creating this mobile website where I am trying to change the font-size and color of some text. Now, I have tested my code on my PC, iOS and Android (using Chrome browser) and only on the Android there seems to be a problem. When using an imported CSS document some settings will not change, but if I type then in directly into the element using the "style" attribute everything works.
Font
The font-size seems to have different levels as when I type in:
font-size: 31px;
it gives me this:
Hello
However if I were to change it to:
font-size: 30px;
the font size will now be like this:
Hello
Color
Also, the color on Android never seems to change as the color is always black. I have tried changing it to both other dark and bright colors without any success (note the colors are changing on both my PC and on iOS).
Override
I am thinking that there might be some sort of snippet of code which would override these default settings. If anyone of you have found one when importing CSS to a PHP/HTML doc or have any other solution it would gladly be appreciated!
your style is overwritten by some other CSS class or css styling use:
font-size: 30px !important;
thereby your styling will be applied over all other stylings thereby overwriting all predefined stylings
I'm working on optimizing a website for mobile devices, and I'm nearly done (yay!) but one thing makes me rack my brain:
How it works
I used CSS to restyle a tab-bar (actually a list) to work like a dropdown-menu. When touching the only visible list element, jQuery toggles the class "open" on the ul-element and all list elements appear also. That's how it works.
The Problem
When unfolding the dropdown-menu, it's font-size increases from 15px to 19px. And in Inspector there is absolutely no hint why this happens. Adding a rule like font-size: 15px !important; has no effect.
I made a little screencast for you: http://youtu.be/MUTJfTK70PE?hd=1
Affected devices
Android (Samsung Galaxy)
iOS (iPod, iPhone, Simulator)
Windows Phone (Internet Explorer) is not affected (wow!)
I would be very thankful for every single idea!!
You may try adding something like this: font-size: 1.5rem;
It turned out, that Mobile Webkits font resizing was the origin.
This rule solved it:
-webkit-text-size-adjust: none;
In html5 this is best solved by explicitly setting the viewport in the page header. The statement
<meta name="viewport" content="width=device-width, initial-scale=1.0">
turns mobile font resizing off. Setting text-size-adjust to none has the disadvantage of disabling zoom on mobile devices, still requires heavy prefixing and the value none seems to be ignored by some browsers.
I have read 10+ questions concerning this issue, yet no one solved it for me..
I have uploaded the app in a github publich repository, and there is the phone gap build link. I'm testing on PC-Browser (chrome) using "Ripple" simulator, it's working fine. But when I test on my phone (Samsung Note 3), it gives weird transitions other than slide!!
as much as I can tell, it fades then slides, which gives a horrible transition effect. =(...
Please Advice..
[UPDATE] Feel free to edit the repo (if possible)
I couldn't find any suitable solution for this issue but I have something like a hack to overcome it
upgrade your jQuery mobile to JQUERY MOBILE 1.4.0 RC1 or anything above, this will make your animations faster and smoother.
add those lines to your css main file:
/** To fix white flash between transitions**/
.ui-overlay-a {
background-image: url(../img/bg.png) !important;
background-repeat: repeat !important;
background-color: #182633 !important;
}
.ui-page {
-webkit-backface-visibility: hidden;
}
update ".ui-overlay-a" css with corrosponding backgorund color and image.
I updated to the newest version of Chrome for Android on my Nexus 7 tablet and ...
-webkit-overflow-scrolling: touch
... no longer works. In addition, the following evaluates to false:
!!('WebkitOverflowScrolling' in document.documentElement.style)
Was support for overflow scrolling removed from more recent builds of Chrome for Android? Is there an equivalent or comparable alternative momentum scrolling mechanism (not iScroll, etc.) that I can use found in the newest version?
As well, I searched for Chrome Beta in the Play Store on my device and it does not come up in the search results. Maybe the beta version is not offered for Nexus 7 tablets?
Any help on this matter is much appreciated. It's very frustrating that Google appears to have removed this feature from their browser ....
edit:
Detailed version information:
Nexus 7 tablet running Android version 4.2.2
-webkit-overflow-scrolling: touch;
and
!!('WebkitOverflowScrolling' in document.documentElement.style)
Works and evaluates to true on Chrome version 18.0.1025469
Does not work and evaluates to false on Chrome version 26.0.1410.58
Try adding z-index: 0 to the element with overflow: scroll to create a stacking-context that provides a hint to Chrome to use the fast-scrolling code path.
Background:
I am currently experiencing this issue after updating to the latest version of Chrome for Android. This was also compounded for me by the fact that due to this change the current Modernizr test for this feature now returns false, so my CSS styles were not being applied.
Digging around I found another issue that discusses the support for overflow scrolling touch:
Tien-Ren observed while debugging 162363 that -webkit-overflow-touch
is an inherited property. So the behavior of setting z-index: 0 on all
non-hidden elements with that property creates a cascade of stacking
contexts below it. (This behavior, behind
ENABLE_ACCELERATED_OVERFLOW_SCROLLING, is currently enabled only on
Android.) The obvious fix would be to set z-index: 0 on only
"overflow: scroll" elements.
So it would seem that if you are having issues with the scrolling not working as expected then adding z-index: 0 to the element with overflow: scroll then this may help. However this did not work for me, although the scrolling sections worked (after I had modified the Modernizr css-overflow-scrolling test to return true for this version of Chrome) the momentum effect of the scrolling was not present.
From this URL = https://code.google.com/p/chromium/issues/detail?id=175670&q=overflow-scrolling&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified
'
No, I think this was indeed triggered by 172481. We removed -webkit-overflow-scrolling with the hopes that it was no longer necessary because we'd automatically opt-in to fast scrolling when we need. The problem is that it isn't happening here.
Those SP changes you mentioned probably won't affect this issue because they won't show up on a non-corp account, right? I think everything works fine with corp but I'll check.
'
A dirty solution that worked for me (required Hammer js):
Hammer($('body')[0]).on("dragup", function(ev) {
window.scrollBy(0,ev.gesture.distance);
});
Hammer($('body')[0]).on("dragdown", function(ev) {
window.scrollBy(0,-ev.gesture.distance);
});
we had scroll problems with on Chrome 40.0... on Android (tablet & mobile) and we fixed with css only solution. Maybe it is not clean but works for us:
#media screen and (max-width: 1024px)
html, body {
z-index: 0 !important;
overflow: scroll !important;
}
}