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?
Related
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. :(
I have built a Meteor App/Website and I am trying to have a responsive fullscreen background image at the top of this page (https://www.conducate.com).
It works as expected in the Chrome Developer tools as well as in the Safari Responsive Design mode, but when I deploy the page and look at it on my mobile, it seems to zoom into the top part of the image, and does not resize it as expected from the dev-tools. As a result, there is just a grey blur to see.
Has any of you come across this problem before? It is hard to debug, since it works correctly in all the developer tools, but not at all when actually viewed on a mobile device.
Below is a link to an image with screenshots, one from my mobile (iPhone 6s, safari browser) and the other from the safari responsive design mode on my mac. Unfortunately, I am unable to post an image due to lack of reputation, so I can just post the link - I am still a newbie here...
https://s3.eu-central-1.amazonaws.com/conducate-images/stackoverflow/example_screenshots.png
Any help is much appreciated!
After some searching for iOS specific issues, I finally came across the solution to the problem by looking at some other examples.
It turns out, that most browsers understand the css line
.container{
background: url(http://www.link-to-image.jpg)
...
}
This is not the case for iOS, here you need to specifically state that it is an image, that is used for a background.
.container{
background-image: url(http://www.link-to-image.jpg)
...
}
I'm trying to implement a very simple video as a banner on a website using html5 tags. I just need it to be full width and responsive, which appears to work perfectly in Chrome and Firefox, but not Safari.
Here is a simplified version taken from a more complex wordpress page using exactly the same markup and the same happens.
http://noisilyfestival.com/video-test.html
I've set the video background to red, see in Safari there are huge gaps at the top and bottom whereas in Firefox and Chrome it sits flush.
Can't figure out for the life of me what's going on here! I've set the video to display:block which fixes the few pixel gap at the bottom but cannot resolve this. Thanks in advance!
I removed display:block; from #homepage-video and Safari looked just fine.
It was pointed out to me that on resizing the browser width the issue would correct itself. Therefore the intrinsic ratio technique is the most efficient way to ensure this works cross browser...
http://alistapart.com/article/creating-intrinsic-ratios-for-video
Works as it should now on all browsers I've tested it on.
On a slider I have on my site, for some reason iPhone users are reporting that the text in the main slider (royal slider) isn't displaying. I've tested it in multiple online simulators (but they've probably just been restricting the size, rather than using the iPhones rendering engine) and have yet to replicate the issue.
It works fine for me on Android devices, but can't figure out what would stop it from showing on an iPhone.
Any ideas why?
Here's the url Issue is in the main slider in "Breaking" news section
Thanks!
It seems the royalslider.css file is telling the <a> containing the text to hide in Safari (desktop and mobile) browsers. Check Safari on the desktop and you'll see the following CSS on line 29 of royalslider.css.
-webkit-backface-visibility: hidden;
You'll probably want to override the value in your CSS file.
Here's some info on backface-visibility
I am stumped as to why my styling is so distorted when I use firefox.
The website is http://shehunter.joshmu.com
Could it be related to the fact this site at the moment is being worked on via a public dropbox url?
Font, positioning and background transparency seem to all be wrong.
Works fine in chrome and safari.
EDIT-
when i click on the info tab the text is displaced far to the left...
in the 'music' section there is a transparent blue background appearing...
UPDATE-
info section solved with position:absolute cheers #sarcastyx!
however still have problems in firefox with it accepting google web font and background transparency problem in the music section of the site.
Thanks for all the help everybody!
Looks good in firefox for me. Screenshot: