I'm using web components in a shadow dom, and all animations work fine in Chrome. However, in Safari and thus iOS Safari, the animations on elements work fine, but not on pseudo elements. This baffles me, because it's ONLY on pseudo elements like :after and :before.
There is nothing wrong with the code, because when I run it without a shadow dom everything triggers just fine and works perfectly in all browsers.
Why is this, and how can I remedy this problem?
I've tried setting important on the animation css, didn't work.
Tried moving #keyframes higher up in the shadow dom, didn't work.
Tried including the #keyframes in the document that includes the shadow dom, this worked.
However, I'd prefer not to solve it like this because then I have to include a shared animation css asset in both the main document and the document that is meant to be included via shadow dom. And it's still weird that the normal animations work, but not pseudo elements. The pseudo elements are there, the ONLY thing lacking is that the animation doens't trigger.
Related
I've used keyframes to animate the entrance of some elements onto my page, however the elements are located at the bottom of the page, so the animation takes place before you see them.
Is there a way to stop the animation from happening until the user scrolls into view of the elements? Preferably not a jQuery solution since I am not familiar with it.
Note: I know there is a library called wow.js that solves this issue, but it uses animate.css for it's animations. This is a problem for me because I was using animate.css originally but it was overwriting/conflicting with some other css I had. That is why I switched to using keyframes for the animations, and in order to have all the properties of elements working correctly I believe I have to stay with keyframes rather than animate.css
I found my own answer! Wow.js still works because you don't have to necessarily use animate.css animations, you can still use your own custom animations.
A demo of the bug can be found here: https://github.com/Twinbird24/vue-scale-transition-example/tree/simplified
A video demonstration of the bug can be found here: https://gofile.io/?c=4HwzAT
Here is the code on Stackblitz: https://stackblitz.com/edit/vuejs-starter-ndpy8b?file=styles.css. Click on the css file (styles.css) to change the scale and you'll discover the bug.
The code found in the GitHub/ Stackblitz linked above contains two divs that are fading in and out through the use of Vue transitions. There is a third div that is absolutely positioned above these transitioning divs. The bug appears when you change the scale of the container that holds all of these divs (look for the commented CSS for the source of the bug). After a certain point, the z-index of the third absolutely positioned div will break, and it will become covered up by the transitioning div. This bug appears in Chrome, but doesn't seem to be apparent in Firefox.
I implemented an A-Frame animation inside a single section on a Vue Js 2 webapp project.
I also added a smooth scrolling component for the global app. My A-Frame block is set to "embedded" to not take the the full screen size.
On Development everything looks nice. When I go live my smooth scrolling is really bad espacially on mobile device. I looked to disable A-Frame on mobile device but no info on the doc, I tried to do it with css with media queries but still the same issue.
I don't know from where it comes and which part of code I have to fix. No error on the console.
Anyone met this kind of issue please?!
Thx
I've not run into this issue before, but you could try to place the aframe scene in a separate file, then use an iframe in your main page and see if it improves.
This video is set to autoplay and loop. The start is ok. Wheel spinning video loading. But after the first playback the spinner comes up again. Any solution for this?
Maybe this is related issue:
The test video on videojs.com when opened through Internet Explorer.
Click play, then skip to near the end of the video. It's not set to
loop, but anyway after the playback it returns to the start in Paused
mode, and you can actually see the spinner behind the play button.
However it's not animated, in my case it's spinning.
You can add this: data-setup='{"children": {"loadingSpinner": false}}' to your video tag, it will remove the spinner.
This seems to be a fairly common issue with VideoJS. I noticed you already set display: none; on the .vjs-loading-spinner element and that's not working, so I was able to get rid of it by using jQuery to remove the element from the dom.
$('.vjs-loading-spinner').remove();
That should take care of the problem, though I realize this is probably not ideal.
I'm having some issues with a website that only occur in Safari. I'm running version 5.1.7 (7534.57.2) on a Mac.
You can view the site here: http://mcad.edu/annual-report-2011-12/.
The website is parallax scrolling, with a relative positioned content div that holds everything, including the 3 parallax scrolling backgrounds which are all fixed, top and left set to 0.
Within the fixed parallax background containers, colorized images fade into full color images when a user mouses over them. For each "image", there are two divs stacked, each with background images that are positioned by background-position. The div on the bottom has the colorized image. The div on top has the full color image as a background and has its opacity set to 0 until mouseover. The fade is achieved using a CSS transition on the opacity property so that the top div becomes visible.
So, in Safari only, when I mouse over any of these divs, the transition occurs smoothly but all of the content in the same parallax scrolling background div shifts/jumps in the process. If I remove the CSS transition, this does not occur.
I think that it might have something to do with the transition/webkit-transition property not playing nicely with a fixed position container in Safari. However, all of the issues I've found that relate to that are from 2010 and mention a Safari bug that I assume has been fixed…two years later. But maybe not.
There's also another issue with the Catalyst section (3rd dot down on the right navigation). These animated images work as links in Chrome, Firefox and Opera, but not Safari. Any ideas?
I have a similar issue with a fixed position and transition-duration for a header menu I've created. When a visitor scrolls down, the menu has a box shadow that fades into place. Well when this is viewed on safari in a MacOS, I get a weird sliding in issue. To easily fix this, after spending way to much time searching for answers, I'm removing the transition effect for macs. This fixes the slide in issue but gets rid of the transition effect sadly.
So as you were speculating, it probably is the transition duration on your project as well. The best thing for this would probably be to make a Mac-Safari CSS file, get rid of the transition-duration for that particular area and move on with your project.
Best I can suggest for now. Hope it helps.