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?
Related
I do not know how it has happened, because it worked properly at some point, but after doing some changes, I think to the main scroll container layer of the page, this started happening.
It is a weird visual glitch, I am not able of reproducing it, all that I can say is that the transition is a CSS transition with transform: translateX() and that while the transition is running both elements (new and old) get an absolute position that its remove once the animation ends. Also, there aren't any text-shadows in place.
I does not happen in firefox nor in chrome mobile, and it does not happen always, depends on if I have or not the developer tools opened, I think it might be because of the change in viewport resolution when those are open.
I have this issue as well;
fiddle
Seems it has to do with multiple layers of nested animations.
Its a bit to complicated to outline here!
This is really odd. I'm not complaining that something works, but it is very surprising ..
On my website I had the usual css :hover for the navigation to reveal sublinks. But on the mobile browsers this needed some js help to make it work (as you can see from those many posts about "css hover not working on mobile browsers")
I made a simple script to fix the hover problem. But today as I was rewriting the code, since I noticed that it was not fully working as intended, I removed the entire mobileDetect.js which was handling the mobile hover. And now it works, without any additional scripts.
I tested it with chrome and safari on my ipad and iphone. It works as intended... did I misse out a big mobile browser update or something?
I use Jquery from google, no framework and standard HTML5.
Here is the site : (easy-sailing.ch) "EVENTS" and "AUSBILDUNG" are the mentioned navigations with sublinks.
I am just wondering if this is some odd anomaly and therefor should put my script back in or just enjoy the good news? :S
as far as i remember it has always been working...
...it is just not needed because there's no cursor and hover happens usually when you click (touch in this case) and you'll leave the page before noticing hover.
on android i can observe it when i touch+slide up or down.
I have fixed this for me by removing :hover selectors/rules at runtime https://github.com/kof/remove-hover
I'm working on a responsive website with lots of CSS3 animations (keyframes).
As much as it works good in a desktop Chrome browser, the site is too heavy for mobile and crashing it's browser or even sometimes restart the device LOL.
I'm new to both responsive and CSS animations, and will like to get your help to optimize the animations so they will work on mobile devices without crashing them.
I already changed all my animations (keyframes) from using position top/left to transform translate3D.
And I also set the animation-play-state to "paused" by default, and changing it to "running" only when you get to the area of the element (when it's in viewport).
What more can I do please? or, do I can't do anything about that and should always pause the animations on mobile devices?
You welcome to answer me in general, or visit the site in the next link -
* DO NOT open it in a mobile, it may restart your device! *
Open it in latest Chrome or Firefox: http://goo.gl/BVsVH7
Again I'm new to both responsive and mobile, and I have no idea what I should and shouldn't do.
I think it is hard to make this work well on mobile devices today.
I ran your website on google pagespeed and there are plenty of stuff you can make better. Paste your url there and you'll get a bunch of tips for optimization.
Google PageSpeed Insights
So I made a site that heavily relies on CCS3 animations, I would never do this for a client as I know it is risky but as its just a personal project I don't mind.
The animations work fine on modern browsers using Windows 7 and they seem to work on XP when using Firefox, they don't work at all on IE but again it's a small personal project so I do not mind.
Now when using the site on the latest Chrome with XP the animations work but not correctly.
When you click the div, the div flips over displaying information, but on Chrome/XP it just flips the div but just shows the same div, just backwards instead of showing the other div behind it.
Also when using Chrome/XP it shows some of the images backwards when you load the site up, which I assume is the animations not displaying correctly.
You can see the site here: http://www.dansteeds.co.uk/awipmapv2/
Any help or information is greatly appreciated.
Chrome uses gpu hardware acceleration to render 3d css.
type the following url into your chrome browser http://chrome://gpu and check for 3D CSS: Hardware accelerated. If it isn't, it will instead use a kind of quasi-3d isometric projection.
I think the hardware acceleration might be disabled in your browser causing a bug in your animation.
:)
I am trying to make my mobile site accessible to as many browsers as possible, and I noticed when using the opera mini simulator (http://www.opera.com/mobile/demo/) that it doesn't support css background position - which I'm using to display a sprite for all of my site images. Are there any workarounds for this?
There has to be something else that keeps your code from working, because Opera Mini 6 does actually support background position.
Th website of the company that I am working for uses background position in some places, for example to change the color of the active menu button, and that works just fine. On the other hand there is some other rendering problem that makes it only show part of the button, but that part is the right color...