Image zooming issue on Ionic - ionic-framework

I am trying to implement image zooming for image in Ionic app.
It has been implemented here
and works flawlessly on the original project created with Ionic V 1.0.0 but doesn't seem to work all that good in Ionic V 1.3.0.
On V 1.1.0 this
($ionicScrollDelegate.$getByHandle('scrollHandle' +
slide).getScrollPosition())
logs a json like this
{"left":0,"top":0,"zoom":1}
But in V 1.3.0 it logs it as
undefined
Also on chrome it shows warning like this:
Delegate for handle "scrollHandle0" could not find a corresponding
element with delegate-handle="scrollHandle0"! getScrollPosition() was
not called! Possible cause: If you are calling getScrollPosition()
immediately, and your element with delegate-handle="scrollHandle0" is
a child of your controller, then your element may not be compiled yet.
Put a $timeout around your call to getScrollPosition() and try again.
This is still working on devices (tested both on iOS and Android) but not smooth at all. It is very laggy.
Any thoughts or workarounds?

So the issue had nothing to do with Ionic version which I realised after more debugging. It was due to
delegate-handle="scrollHandle{{$index}}"
In my usecase I was not using ng-repeat so was using
delegate-handle="scrollHandle"
But this was not working and causing the above mentioned issues. So fix was to add 0 as index with it. In my case this solved it.
delegate-handle="scrollHandle0"
In other cases use case may be different so but if using ng-repeat this would work
delegate-handle="scrollHandle{{$index}}"
and if not this should do the trick
delegate-handle="scrollHandle0"

Related

Flutter Release APK is not displaying content properly whereas Debug APK is working perfectly

When I'm exporting the APK or AAB of Flutter app, debug version is working great on all devices. But the release version is not working properly. It doesn't display any of the elements properly except images. I have attached a screenshot for reference.
I have tried multiple ways to figure this out.
I have tried with exporting apk with --no-shrink, filtered out x86 version for AAB, enabled internet permission also in Manifest file but it's still not fixed.
Please help.
Here is the app link on PlayStore : https://play.google.com/store/apps/details?id=com.theneondesign.flikko
Release version screenshot
Debug version screenshot
Update 22nd November 2022:
I figured out the exact issue but not the solution.
The issue is, I'm using height and width in some of the elements.
I'm getting the height and size from Get.context!.height and Get.context!.width
Get.context is not working in release and only works in debug.
Can you help me a way to resolve this?
I have already tried with Mediaquery but as the height and width are in a separate class, I cannot use BuildContext. I tried window size also, but it doesn't work as well. I'm new to Flutter, so I couldn't figure out any other way.

Why local package widgets not showing up time to time?

I have a ui package, this package simply contains some(10+) widgets and they are all just a widgets. None of them some complex controller or etc so when I use them, I can't miss the something like initializers or etc.
So my problem is, after the installation an app(which is contains a lot of witget from that package) everything working correctly like the image.
But if I change the current app on android/real device(and without debug mode), like switching the chrome and spend some time at the browser, after returning the app, all widgets showing off, they are simply dissappering. Like the image;
So my question is simple, why can it be happen? By the way, the divider as shown the middle of the page,is not part of the package, it is located in app/lib folder.
and lastly, I don't give any change but I have 57 svg file in the package but I am not call all of them at same time and their total size just 833,5kb, but maybe it can be related?
I don't have any native knowledge but if anyone can point me some tips, I will be glad.
Not really sure if it's a bug related to the new version of Flutter (3.0.2) but upgrading ext.kotlin_version inside android/build.gradle to 1.7.0 do the trick.

Unity WebGL Mobile browser workaround and keyboard input fix?

Hey everyone so I read that unity doesn't really support mobile browsers for WebGL games. im using 2020.1.4.And sure enough, the game gets a bit distorted by not being scaled properly. it's like the camera is bigger so it shows on the screen that blue color. I tried some things, setting width and height to auto or removing config.devicePixelRatio = 1; as suggested by a friend but nope! still looks horrible! And if that wasn't enough the keyboard doesn't show up when clicking on form fields. i tried this one
https://github.com/eforerog/keyboardMobileWebGLUnity
which displayed an error when pressed on and this one
https://github.com/dantasulisses/WebMobileInputFix which just didn't even compile!
Any ideas, please?
I did my research and tried every plugin I could find. I used Unity 2020.3.28f1 and tested both on Android-phone and iPhone.Here is my report.
These plugins don't work:
https://unitylist.com/p/f58/Unity-webgl-inputfield
https://github.com/eforerog/keyboardMobileWebGLUnity
https://github.com/dantasulisses/WebMobileInputFix
This plugin works, but you should use different settings for IOS and Android on same input field game object. If you use "prompt", it works for IOS only, and "overlay" works for Android only. Look for documentation in page:
https://github.com/unity3d-jp/WebGLNativeInputField
And this plugin works best at the moment. Yes, it is a bit ugly though, but it works.
https://github.com/kou-yeung/WebGLInput
And there is a fix for Unity 2021 for it:
https://github.com/kou-yeung/WebGLInput/releases/tag/1.0
There's a keyboard that overlays, when using it you just need to tap the notification to access it and then click the "back" button to hide it https://play.google.com/store/apps/details?id=com.fishstix.gameboard
I made this project that simply recreates a keyboard using buttons in unity.
I implemented it in a WebGL build successfully.
https://github.com/thetimeste/WebGL-Build-Keyboard-Unity.git
I would recommend using the native js window.prompt() fields as of writing. They have great cross-platform support, allow for extra features like special characters, emojis, copy and paste etc. and are pretty easy to set up. Once (or honestly if ever) Unity adds their own reliable implementation you can easily remove this lightweight implementation.
Create a .jslib file that has a function opening a window.prompt(description, currentText)
Return the result at the end of that function back to a unity object with a recipient script
Make a derivation from Unity's event system overwriting the OnApplicationFocus(bool focus) function (leaving it empty), to fix a sneaky Chrome Android bug.
That's it. The result should look something like in this demo: https://pop.demo.neoludic.games
If you want to save some development time on a feature that really should just be native in Unity, you can also check out my plugin based on the method above. https://neoludic-games.itch.io/pop-input
I also need to enable mobile virtual keyboard for running webgl on mobile device.
I've tried the code from your mentioned url. It gives you some idea on how to do
it, but the code are totally buggy and unusable. Now I am trying to implement it
by myself.

UI tests failing in Xcode 11, but used to pass in Xcode 10

I recently upgraded to Xcode 11, and my UI tests that used to pass in Xcode 10, are now failing, no code changes were made, and now its failing to find an element on the screen that it used to find
I tried setting the isAccessibilityElement to true for the element I want, like I used to, and I can see it on the Accessibility inspector, but when I run my UI tests and try "po XCUIApplication()" the element I am looking for is not found, any thoughts on what could be wrong? I have been busting my head trying to solve this, but I don't know what's wrong anymore
Never mind turns out I had a button for a view, and Xcode 11 is more strict when it comes to UI testing than Xcode 10 used to be, so after changing the button to a view instead, the tests were passing again

Workaround for webkit bug on iOS5. Bug description: The content of an iframe which has a parent with -webkit-transform: scale(x), is scaled 2 times

I am having some trouble with a webkit bug [1]. Long story short, if an iframe has an ancestor with -webkit-transform: scale(x) the content of the iframe is scaled 2 times.
The platform on which this is happening is iOS5 (both in Safari and UIWebView). I have tested on iOS4, iOS6 and the latest nightly build of webkit and I can not reproduce it there. So the issue seems to be fixed in the newer releases.
I tried the workaround described in one of the bug comments [2] and it does not fix the problem completely. In order for it to work I had to first add -webkit-transform-style: preserve-3d and then inside a timeout add -webkit-transform: scale(x) to the same element. This would have been acceptable, but if any inherited property is changed in one of the iframe's ancestors, the workaround is nullified and the content scaled 2 times again.
Does anybody know any better way to work around this issue ?
Links:
[1] Link to bug : https://bugs.webkit.org/show_bug.cgi?id=15676
[2] Description of workaround : https://bugs.webkit.org/show_bug.cgi?id=15676#c10
I had the same issue and managed to resolve it this way:
webkit-transform: scale(x)
zoom: 1/x
Also you might want to have the same fix for scaling pretty much anything on Android 2.x
I still have an issue though on iOS5.1 that despite content is scaled correctly, if part of it was behind the visible viewport (under overflow: hidden), it still appears blank in scaled iframe.