I'm struggling with an issue for several weeks about MapboxGL and layers.
I have a map with layers (raster layer)and I trigger visibility with actions (time, buttons, user gesture, etc)...
With Chrome everything is OK I can set the visibility of layers using the setLayoutProperty method.
My function doesn't work with Safari (on macOS and iOS).
I reproduce the issue using mapbox official example and adding a timer on the layer visibility.
setTimeout(() => {
map.setLayoutProperty('radar-layer', "visibility", "visible");
}, 3000);
=> https://codepen.io/simon51/pen/eYWjPOz
The normal behavior : the clouds will be displayed after 3 seconds.
(it works with Google Chrome and it reproduces the current issue with Safari)
Thanks for your help
OK, it was a bug fixed by a very recent release of mapbox-gl (about raster image and safari)
more here : https://github.com/mapbox/mapbox-gl-js/pull/10698
Related
I was trying to implement a WhatsApp like cancelling recording button.
Everything was working fine, all animations lauching correctly, start and stop recording too.
But after a few seconds (could be 10 seconds or 1 minute) pressing the gesture handler, the app freeze, all animations start to lags and FPS drop to 0.
After trying many things, I found out that it is linked with a Flatlist I have in my view. When this Flatlist is inverted, that is when everything crash.
Here is the link of the Snack https://snack.expo.dev/#mikelh997/animationtest
Just try to move the mic for at least 30 seconds on a physical device and you will see the app freeze
I am doing my tests on Android emulator and on Samsung S21 Ultra. On iOS everything seems to work fine
Thinking it was may be my packages version, I started a new project and put inside my view only a Flatlist with text items and my PanGestureHandler. All packages are up to date, even though the behavior is the same. If I remove "inverted" from my Flatlist, everything work fine.
I also tried to use Animated.Flatlist but no change (actually it's worse because inverted in Animated.Flatlist is not working correctly)
I also tried to reproduce it on Snack Expo, on my phone it crashes.
I noticed also that it is not linked to PanGestureHandler or Reanimated, because if I just create an animation with React Animated (with Animated.timing), and loop it, it does the same.
Edit : it seems like it is happening only on Android 13
After research, it is linked to Android 13, more and more people are facing this issue.
Only solution I found on Github was here, it is the only way to make it worked while waiting for a fix
style={{transform: [{rotate: '180deg'}]}} seems to be the best workaround for the time being.
It works as expected on Android, but on iOS it opens camera and only after exiting the camera app it leaves the snapshot in the canvas.
How do I make iOS handle display camera feed in HTML?
I'm posting a (non-functional) fiddle, to illustrate the html and the initialization methods.
https://jsfiddle.net/nz41b2kq/
{ some code to appease the SO algorithm }
The solution was to use "playsinline" attribute in the <video> element.
I am using the Flickity slider (from Metafizzy) in a landing page to show different products. The slider is in portrait size and not landscape.
The issue is that when the user only scrolls the top portion of the slider into the viewport on mobile (i.e. 20-30%) and they attempt to scroll/swipe the slide, the screen suddenly jumps to attempt to include the whole slider into the viewport.
This never happens on the mobile emulator on the desktop, but only on the smartphone device on safari and google chrome browsers
Is this intended to be a specific behaviour for the Flickity slider? Like I should not be using it to make portrait sliders? I've gone through the plugin options and not able to fix this behaviour. It never came up in early testing with dummy content.
I've provided a link to the github page where it is happening, you can open it up in mobile browser and see the viewport "jumping" bug when you attempt to scroll the table. https://true-digital-channel.github.io/Galaxy11-Preorder/build/mobile.html
Disable the keyboard accessibility by setting accessibility: false in the carousel options. From the Flickity issue tracker.
I noticed that often when I scroll my bootstrap-page through chrome (mobile version), some parts freeze and other one scroll over and the effect is like image flickering.
I checked on my tablet (samsung galaxy tab 2) and on a friend's galaxy note.
Chrome browser is updated to current version!
For example I can get this effect scrolling down also the bootstrap documentation page like as http://getbootstrap.com/getting-started/
Why does it happen? Did you aware same issue?
Is it a chrome bug? Can I fix it through code?
Thanks a lot!
You can avoid the flickering by using this at the beginning of CSS
*{
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
currently i have been working in a project to create chat client support emoticons icons, but i facing a problem that in my titanium appcelerator project i must load > 100 emoticons in a view. The fact that titanium appcelerator load multi images very slow, and i don't know why it happen, can someone suggest me a solution to resolve this problem ?
assuming your UI implementation can support it; load a single image that has all ~100 emoticons and add a touchend event listener to the image view. the even returns the x,y coordinate which you can then map to the emoticon that was selected.
var self = Ti.UI.createView({backgroundColor: '#666'});
var emoticons = Ti.UI.createImageView({
image: 'http://www.berkeley.edu/news2/2013/04/Finch300.jpg'
});
emoticons.addEventListener('touchend',function(e){
alert('x: '+e.x+' y: '+e.y);
})
self.add(emoticons);