I faced a strange bug with element animation. It works good on Android phones and Windows PCs, but behaves strange on iOS and MacOS: the back ring starts hopping up and down, and I can't figure out what's wrong, any ideas?
The app was build on vue3 and the chart was made with Apex charts.
Here's a link (with uid for a backend to work properly) https://clientdash.psyreply.com?uid=68304
How it looks like on Android
How it looks like on iOS
Related
I'm developing a website and currently testing it in Google chrome on my PC. I found out that on iPhone devices, the bottom toolbar that is present in Chrome, breaks the layout. I understand how to fix this, but - is there a way to test the layout without a physical iPhone?
in Chrome developer tools, for example, changing to mobile devices only changes the dimensions, it won't add a toolbar functionality.
(If it matters, my issue is having 100vh on pages, I understand how to fix but want to make sure before deploying)
If it's not possible to simulate (doesn't have to be Chrome obviously, could be anything), is there an alternative way to test the behavior when something like a toolbar unexpectedly changes the viewport?
I need to make a react component that will continually flip over, exposing a new image each time. I have done this in my project, and it all works wonderfully in chrome on the desktop.
The issue is, that I need this on safari(desktop/mobile) and chrome mobile also.
I have created a minimal demo on codesandbox, which can be found here
What should happen, is the card should flip up, and then back down ONLY rendering its respective side.
My belief is that backface-visibility is not supported/is very buggy on mobile.
How can I acheive this without an external libaray?
I introduced some fade-in/fade-out logic when I'm transitioning between "screens" in my react web application. You can see an example of the "screen transition" here: Rabbit (source code).
The animations were working fine on my phone in Safari, but not Chrome.
At first, I thought it was something to do with Chrome on iOS, but today it seems to be working fine.
I've realised that when I was first trying this yesterday, my phone was quite low on battery (no warning, by maybe about 30% ish). Today with my phone fully charged, the "screen transition" animation in Chrome is working fine.
I tried to reproduce by going into iOS accessibility settings and setting "reduced motion", but that doesn't reproduce the issue. My app detects that prefers-reduced-motion is set to reduced, but the screen transition animations seem to function fine regardless of that (though perhaps in future I should turn off the animations if the media-query returns true).
So, while I sit here waiting for my phone to discharge - can anyone point me to any documentation about Chrome not performing animations if the device is low on battery?
For anyone finding this from a search: I was not able to find anything about a "low battery" mode relating to animations on iOS.
The cause of my disappearing animations in Chrome seems to be some kind of intermittent bug. I've seen it a few times since (never managed to reproduce reliably though) and restarting the browser seems to fix it.
We have developed a website (only designed for mobile platforms) but we are experiencing a rare failure.
The webis in this URL https://mercadona.mandarinawebs.com
In the website you can find a menu and there is the problem.
This is how it looks in Chrome (Android)
And this is how it looks in Chrome (iOS)
As you can see, the menu is not showing in iOS.
All the animation are in webkit.
It doesn't work on iOS for safari or for chrome but it works on Chrome for Android. This is strange becouse I understood that the interpretation of the website was made by the browser not by the OS.
I suspect it has to do with some of this but I am quite lost
Thank you
There is one class (scroll-in-mobile)
that contains this:
-webkit-overflow-scrolling: touch;
Deleting this the problem is solved and it works for Android or iOS.
I have a problem with a scrollbar inserted through Ionic 2+ Framework.
I want to deploy a app in Windows 10. I have introduced ion-scroll and all is working. My issue is: When I change to "Tablet mode" and disconnect the mouse and keyboard,where I only can use the touch screen, then the scrollbar inserted is replaced by another scroll, more thinner and I can´t interact with that. I can´t swipe the scrollbar.
I´ve tried to solve the problema with jquery, where I have used jscrollpane, also I have implemented this with CSS (overflow) and Ionic 2+ framework as I have said before.