I have a very simple animation that's running and working in our preview tool, but not in the iframe on a webpage.
https://www.triplem.com.au/story/chaz-mostert-s-ford-mustang-declared-a-write-off-following-top-10-shootout-crash-150217
If you open this up in safari in IOS 12 (simulator or real device) it doesn't play the animations.
I'm wondering if there's a quirk where we have to add an attribute the iframe to allow it to repaint? even if I add $('.some-elment').css('background', 'red') it doesn't apply it to the dom as inline styles.
Is there anything anyone can think of?
Here's a preview of the animations working:
https://create.playground.xyz/sefayo/quiet?pos=header-ad&size=320x50&show-engagements=true
Related
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'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.
:)
Is it currently possible to set the background color of HTML5 video elements effectively? About HTML5 Audio and Video points to the fact that you can style video tags with standard CSS, but in my experience this isn't fully working:
On Chrome 23 (Snow Leopard) adding a poster image attribute to the video tag removes the background color, without a poster image it works as you might expect
On Safari 5.1.7 everything works correctly
Perhaps unsurprisingly Mobile Safari on an iPad running iOS 5 is a law until itself. The background color will always be black, no matter what I do. Occasionally I might get a flash of the set css background color before the poster / video load. But even with an empty video tag, the background color won't display.
Anyone had any success setting a background color on iPad?
Please refer to my question according HTML 5 on mobile safari.
Seems that it's impossible to control it, as video rendering is delegated to hardware through the browser, and is displayed "above", so controlling css properties of it would not affect anything.
My research was some ago, but don't think that since then anything changed.
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...