I'm going crazy with this homepage: http://faboola.it
The boxes with the icons/links below the hero image work fine on chrome and FF, but don't render in Safari (desktop, 11.02). I tried removing every animation, replacing SVG with PNG, but doesn't work.
Using Wordpress with WPJoints/Foundation 6.3
Any ideas? Thank you! :)
Ok, it has to do with the Motion UI animations on the DIVs. Removing the animation from CSS seems to fix the problem. Looks like a bug in Motion UI on Safari:
https://foundation.zurb.com/forum/posts/54883-mui-series-safari-11-compatibility
https://github.com/zurb/motion-ui/issues/97
I removed the animations. :(
Related
On https://f860ffcc56.nxcli.net/. I have a smart slider piece at the very top of the website with a simple animated Font Awesome downward chevron. On pretty much every browser (FireFox, Chrome, Arc, Brave, Edge, Opera, etc...) it is showing as expected. On Safari however it is not showing up. As far as i can tell it is not a z-index issue but i really am stumped on this one as to why it isn't working. I've tried changing the way Font Awesome is being loaded with no avail.
I was trying to apply a parallax effect using the combination of clip-path and a fixed image. The effect worked well, as demonstrated in the following Github repo.
Github repo: https://falasol.github.io/overflow/
Demo Page: https://falasol.github.io/overflow/
As you can see in the following gif image, I was tapping the Lorem text on my iPhone and the image poped out, instead of poping out the text selector.
The video of tapping the div
This issue only occurred on Safari Mobile, worked well on Andriod phones and desktop Chrome inspector tool. My current assumption of this question is that the overflow:hidden is having some issues on Safari Mobile.
Please give me some suggestion on this if you have ever got this issue before :)
This doesn't happen to me when I try it with my iPhone on Safari.
Maybe giving the next div a position:relative; and z-index:1; will fix it for you?
Can someone help me understand why certain things aren't working on safari but do on chrome?
These are apparent on both mobile and desktop.
So here is the website I'm currently working on: http://stage.coefficientlabs.com.s3.amazonaws.com/index.html
Problems:
1. The hero video plays smoothly on Chrome but not on Safari.
2. (main issue) Once the "Get Started" button is clicked, a modal appears. All the styling and content seemingly hidden(?) on Safari but not on Chrome.
Any idea what is going on here?
Thank you!
Turns out the issue was "overflow: hidden". I think is a known difference for Safari in general.
I am facing very strange problem with Firefox and GIF image. I have two-three GIF Image in a web page all the GIF animating except one
A GIF image which is not animating in Firefox (Shows Last Frame), does animation in all other browsers like Chrome, Safari , IE. I have latest or nearly latest browser installed.
Please help me to resolve this issue. can that be a problem of Animation Engine like stuff?
I have the following code in my website which will animate two background images, transitioning them over one another and from left to right - http://codepen.io/anon/pen/pJKmn/.
Modifying the HTML and CSS from the codepen, how would I be able to implement a cross-browser and device solution to work not only just in Opera and Firefox Mozilla, but also Internet Explorer, Google Chrome and Apple's Safari?
Just add browser prefixes like this http://codepen.io/anon/pen/eryni/