I have implemented react-native-maps from here:
https://github.com/airbnb/react-native-maps
It was loading the map, my markers were showing correctly until last week. All of a sudden the map view is just blank now. It's just showing a red border and nothing else.
The only thing I have changed last weekend is the name of my project. I have then tried everything I could find online but it's still not working.
Things I have tried:
1. react-native link
2. Things mentioned in the issue here: https://github.com/airbnb/react-native-maps/issues/118
I have the recommended stylesheet for map
map: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}
And the render method looks like this:
<MapView
style={ styles.map }
region={this.state.region}
showUserLocation={true}
>
I still see a blank screen. I would really appreciate some help here.
Thank you.
It worked when I killed the current npm process and reset my cache.
Related
When you open the chart in full screen mode it works as expected: chart is being displayed on the whole screen, but when you exit full screen the original chart stretches to a much bigger height. You can test it here:
https://jsfiddle.net/9b6m438y/
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
How to reproduce: Open context menu in upper right corner of chart, select "View in full screen", then exit the full screen mode and pay attention to the height of the original chart.
How to avoid this?
It is a controversial thing if it is a bug or not because different browsers different works in the current full-screen module implementation - you can see the whole discussion here: https://github.com/highcharts/highcharts/issues/13222
As a workaround (suggested under the above link) you can set the container height in the CSS.
Demo: https://jsfiddle.net/9b6m438y/
#container {
height: 400px;
}
If you have your own opinion about it - feel free to take part in the discussion on the GitHub issue ticket.
I had the same problem in higharts#8.2.2.
Reading the comment below the question, I decided to upgrade highcharts to 9.1.0.
the problem is completely solved in this version.
because of the major update (8 to 9) my code confronted with few problems that can easily be handled. Hope it works for others too.
So I have an input at the bottom of my page, positioned like so:
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
When I open the keyboard on iOS Safai, there is unwanted whitespace below the input. You can scroll up from it but it shouldn't be there.
The highlighting is from Safari Dev console, I've highlighted HTML, so the extra whitespace is not being caused by my HTML/CSS I think...
This does not happen on Android.
Any Help?
iOS safari does not respect position: fixed when the input has focus. What seems to be happening is that the element's position attribute is changed to static.
There are a couple aways around this, but the ultimate best answer for now would be to not use fixed.
Additional reading: https://medium.com/#im_rahul/safari-and-position-fixed-978122be5f29
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'm building a mobile app for IOS, with html5. I'm using "-webkit-overflow-scrolling: touch" to get the native inertia scrolling, but it's very buggy. I've solved the issues with content not rendering until the scrolling stops, but one persistent bug is this:
When I try to scroll up and down, nothing happens, but when I try to scroll horizontally, the content scrolls vertically (90 degrees off axis). If I navigate around my app and come back to the page, it will sometimes be fixed. Also, sometimes it won't scroll at all, despite being full of content.
From what I've googled, the consensus seems to be that Apple is aware of this bug, and has no intention of fixing it any time soon. Has anyone found a solution to get -webkit-overflow-scrolling to work correctly?
I also have struggled with this bug for months. The best characterization that I've found is:
https://bugs.webkit.org/show_bug.cgi?id=87391
which says that it happens when the page has an iFrame and the contents are set from Javascript. My current workaround in The Graphics Codex version 1.6 is to use iScroll4 to explicitly scroll the page rather than using touch scrolling. Because Javascript is single-threaded, this can be slow if you're also performing animations or background loading content.
I encountered the same problem: a node using -webkit-overflow-scrolling: scroll that would intermittently scroll up/down only with a left/right scroll gesture.
Here's what I found to be possible causes:
iframe present on the page anywhere, visible or otherwise (source)
visibility: hidden applied to any parent of the scrollable node (source)
However, none of these situations were present in my web app. I had a scrollable <ul> inside of a pure CSS modal dialog that I wrote which used a clever trick to add a transparent underlay -- an ::after pseudo-element with position: fixed.
When I removed the position: fixed from the pseudo-element, the problem went away! Of course, this made my clever trick useless, but it was interesting to learn that this bug could be triggered by this situation.
Device: iOS 5.1.1 on 2012 iPad 3 (retina)
Offending code:
/* Underlay */
.dialog::after {
z-index: -1;
position: fixed; /* <--- This was the problem! */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.4);
content: "";
}
tl;dr: if containing elements have a fixed position pseudo-element, removing it could fix your scrolling problem.
I know that the issue is kind of old, but I had to make my website work on iOS 5. Unfortunately i couldn't remove nor replace the iframe. I've noticed that the presence of iframe caused the problem only if it was rendered before the element which was ment to scroll smoothly. Appending iframe to the document later (after the element with -webkit-overflow-scrolling: touch) fixed the problem :)
Has any one encountered this already ? I put iAd with the code below in titanium studio and when the app loads in show a white rectangle which is where iAd should go thent it disappears ?
var iads = Ti.UI.iOS.createAdView({ width: 320, top: 100, backgroundColor: 'transparent', zIndex:200 });
t1 = Titanium.UI.createAnimation({bottom:0, duration:750});
iads.addEventListener('load', function(){
iads.animate(t1);
});
Titanium.UI.currentWindow.add(iads);
If you didn't change anything else (like switching to a different Titanium Mobile SDK) then this must have been something between you and Apple. Perhaps something going wrong between their sandbox and your simulator.