I recently upgraded our mobile application to use JQM 1.1.1, and noticed a very big problem on Blackberry 6 browsers.
The screenshots tell the story best.
In the first image you'll see the search text box rendered correctly.
However in the second image you'll see that when the input text box is focused, it makes the textbox black
Please see my screenshots:
Has anyone seen this issue?
I had the same problem, and fixed it with css like this:
input.ui-focus, textarea.ui-focus {
outline: none;
-webkit-box-shadow: none;
}
Thank you for your answer.
From my side, I had to set css to:
.ui-btn.ui-focus, .ui-input-text.ui-focus, ui-input-search.ui-focus
Hope it will help!
Related
The luma theme of magento 2 has a bug.
When iam on an iphone and open the menu the menu opens to far.
It streched past the right side of the screen.
If i do this on android the menu works perfectly.
I was looking at the css code and i found that the menu width was calculated using calc();
It substracted 54px from 100%.
I thought iOs couldn't handle calc but this was not the problem.
Then i tried to fiddled with the width of the parent elements to find the calculation problem.
The problem was that none of it fixed the problem.
And even weirder was the fact that on android it kept working correctly.
Does anyone have this problem also with the luma theme?
And possibly found a solution.
Thanks in advance for you help.
On our website https://dampershop.nl we solved this problem by changing a bit of css.
We added:
html.nav-before-open, .nav-before-open body {
overflow: hidden;
position: relative;
height: 100%;
}
This makes it so that iphone/ios devices opens the responsive menu correctly.
I hope this helps!
I am using http://jvectormap.com/ for an iOS-app working with a webview internally. The problem I have is that there is black flickering when I touch a country on the world map.
You can even reproduce the problem with Safari on an iPad or iPhone when tapping on the demo map on the homepage of http://jvectormap.com/.
Does anybody know that problem? How can we get rid of this? It's a show stopper for my app.
Thanks a lot!
Kim
Edit: I added CSS -webkit-backface-visibility: hidden; to * and the div-container which is containing the map -> does not help.
I found the solution. It's the tap highlighting darkening. I cleared it with CSS
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
I recently launched a landing page for a new website. But on iOS, the inputs fields are ignoring the padding of the container and the subscribe button looks completely different. How can I fix this?
View the landing page: signup.sketchtricks.com
Screenshot on iOS: cl.ly/image/0y0P0m0J3a3X
Thank you for your help, I really appreciate it!
Add...
-webkit-appearance: none;
border-radius: 0;
...to the affected selectors in your css.
I've got a problem with a simple webpage. It isn't quite finished but I tried this one with my iPad in Safari and there appeared a vertical scrollbar altough the document shouldn't be higher than the viewport. (only in landscape mode)
In Chrome for iOS and the desktop version (1367x768px) it's running nearly perfect & I don't understand why there's a problem in safari.
This phenomen is only appearing in Safari/iOS/landscape.
Hope it's more or less comprehensible.
Thanks a lot!
Felix
The following style is for the body tag and not the html tag:
height: 100%;
So, remove this style from html, body { height: 100%; ... } and this should solve the issue. Infact you can remove html from that block. It won't affect the output.
Problem is solved in Safari for iOS 8.
On my iphone phonegap app, whenever I've got text on a background color, the text seems to get a ghosting effect, the same text is repeated 2 or 3 pixels below, almost like a drop shadow but exactly below and in the same color as the text.
Any ideas how to get rid of this? I'm guessing its applying some kind of -webkit specific styling but I can't seem to find what it is.
Below is an image of what is happening, the text to the left, 'Web Deal' is the problem, whereas the text on the right is fine.
Ok, I managed to fix this, it was picking up a text-shadow property from jquery mobile css. It was applying it to all text but because its white it was only visible on text with a background colour. Thanks for your help
Please post your css.
If you are able to open the app on Chrome browser on a desktop, try inspect element and you can find which styles are applied to the text.
As you didn't provide any CSS I'll just assume that your text ist rendered bold.
Rendering bold type in mobile Safari or the WebView is buggy and causes the weird effect.
Try using a text-shadow instead.
.bold {
//font-weight: bold;
text-shadow: 0 0 0 2px white;
}