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);
}
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 know iPhones used to not support position:fixed, but now it does and I'm seeing a weird glitch when I scroll a fixed position element behind other elements with higher z-index. The fixed positions element with the lower z-index appears in front momentarily, which looks really bad. Is there a way to prevent this?
I tried adding -webkit-transform: translate3d(0, 0, 0); to the fixed element and it doesn't seem to help this problem.
Here is a jsfiddle as well.
Update
I added transform:translateZ(x) in addition to the z-index and it did not fix the problem.
Update2
I added -webkit prefix and this DOES fix the z-index problem on an mobile Safari, but also causes the position:fixed to work incorrectly in desktop Chrome.
z-index is not reliable with position:fixed, as shown in this fiddle: http://jsfiddle.net/mZMkE/2/ use translateZ transformation instead.
transform:translateZ(1px);
on your page elements.
EDIT:
In your code,
Add this css:
.bla, .projects, .contact {
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
}
and then remove z-index refs from those elements and .intro.
Update 1: I added transform:translateZ(x) in addition to the z-index and it did not fix the problem.
Update 2: I added -webkit- prefix and this DOES fix the z-index problem on mobile Safari, but also causes the position:fixed to work incorrectly in desktop Chrome. "
Then try to wrap -webkit-transform:translateZ(x) in a mobile specific media query.
For example:
#media only screen and (min-device-width : ... ) and (max-device-width : ... ) {
.whatever {
-webkit-transform: translateZ(x)
}
}
So in this case it won't do anything on desktop Chrome
I tried the solution accepted as an answer in a specific case when I needed to set different position in the stack of different layers, but that alone didn't work both in desktop browsers (firefox and chrome) and Safari iOS
I came out with this hack which uses both translateZ and z-index for each div, which is working in those platforms. The order of translateZ and z-index is important. For setting each layers position is
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
position: relative;
z-index: 1;
I used the same value for the z-index and translateZ just for consistency, it is not necessary.
See working example http://jsbin.com/peyehufo/5
I'm not advocating for this solution, but it's the best I've got at the moment...
In order to replicate the effect of z-index with position fixed on an iPhone, it seems to require two techniques together:
As suggested by #tnt above, use transform:translateZ(n) where z-index is used to get mobile safari to handle the stack order correctly. This appears to have the unfortunate side-effect of causing the position:fixed to stop working...
Instead of position:fixed, use a javascript technique like this to fake it.
I haven't tested this thoroughly (because I'm not going to do it), but it seems to work fairly well. Although the "fixed" element seems to stutter a bit.
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.
I'm having an rare behavior in Safari and iOS6. When changing from landscape to portrait, the viewport is resized, but it seems that is no correctly positioned horizontally. It's displaced exactly 128px to left.
I'm able to reproduce this behavior with an iPad3 in iOS6 going to www.google.com
If you change the display property of the html like this:
document.querySelector("html").style.display = "none"
document.querySelector("html").style.display = "block"
the viewport returns to origin and its displayed correctly. That's why I think that this is a bug.
Any ideas how to fix this?
I had noticed a similar issue this morning.
Anytime orientation changed from landscape to portrait, the whole body element would be shifted almost halfway to the left, when it should be 100% width. This was mobile safari in iOS 6, running on an iPhone 4s.
I nailed it down to the full width search bar I had. On the parent element of this bar, I placed a property of overflow: hidden;
This ended up solving my problem. I spent a long time inspecting other sites and this may not fix your issue. For example, my fix didn't seem to take on BestBuy.com which is encountering the same issue as well.
This bug also applies to IOS6 on iPhone.
Removing and reading the placeholder in an orientationchange handler will fix the problem. This solution is jQuery specific:
$(window).on("orientationchange", fixIOS6PlaceholderBug);
function fixIOS6PlaceholderBug () {
var $this,
originalPlaceholder = "";
$(document).find("input[placeholder]").each(function() {
$this = $(this);
originalPlaceholder = $this.attr("placeholder");
$this.removeAttr("placeholder").attr("placeholder", originalPlaceholder);
});
}
I found the solution thanks to this:
http://www.tonylea.com/2010/safari-overflow-hidden-problem/
I had overflow:hidden in my HTML tag, since I have some rotating DIVs hidden left and right, but it seems that Safari in iOS6 wasn't accepting that. Setting position:relative to HTML tag solved the problem for me!
I have the same bug, but in my case the reason was a input type=text with width: 100%; and when I changed input wrapper to overflow:hidden bug was fixed;
Solution with overflow:hidden for body is bad for inertial scrolling on iOS
I had to add overflow: hidden to the body tag.
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!