Dear Stackoverflow Community,
I create a website with WordPress using Flatsome theme.
The website appears correcly in all browser except on Safari.
The problem is on the slider/banner image using Flickity that is not displayed on Safari.
Here are screenshots from Chrome and Safari for you to understand the problem:
By inspected the element, there are things that appear wrong:
the class bg-loaded used in the Flickity slider appears correctly on Chrome but not appear on Safari
it seems that there is a problem with Flickity: all Flickity class appear properly on Chrome but display a warning ! on Safari:
The website works fine on iPhone.
All the other images within the webpages are displayed properly in all browsers and devices. This is only these banner images that are not displayed on Safari.
Can someone knows what is the problem and how to solve it?
Thank you very much for your help on this issue.
Regards.
Related
I am encountering a weird issue once again, and it again happens to be in Safari on iPhone. Safari on macOS works fine, and so do all other major browsers.
Here's the issue: Embedding a YouTube video in an iframe transforms the iframe to the left, out of the viewport. There is no transform applied to the iframe, or any parent elements. I double checked, but I am out of luck. Funnily enough, there's two quirks:
The clickable area stays non-transformed. I can interact with the content as if it was in its correct position.
Switching to the tab overview renders the video correctly.
Here's a few screenshots to demonstrate the issue:
I have also created a JSFiddle that reproduces the issue, with markup directly out of the project. Visit it on mobile Safari on iPhone or with a simulator on macOS to see the problem in action. (Use this link for fullscreen access)
Any help would be greatly appreciated.
I am developing my portfolio site for wordpress and for some reason that I have not been able to identify my page links are not made visible in safari, but they work fine in all other tested browsers.
http://www.jcstudios.org/about/
They should be in the sidebar on the left side of the page, as you can see in firefox, chrome, i.e., etc, but not in safari. Does anybody know what may be causing this or have a solution?
Thanks!
I don't see the sidebar in Safari 5. Try fixing your code errors in the sidebar and see if that works: http://validator.w3.org/check?uri=http%3A//www.jcstudios.org/about/&doctype=Inline&ss=1&group=0&user-agent=W3C_Validator/1.654
And use dev tools to see the three images that are 404ing:
about/images/close.png
about/images/loading.gif
wp-content/themes/images/header.jpg
I'm hoping someone can help me with a little glitch in IE8 and IE9 with a graphic background not lining up.
If you view this link in IE8 or IE9, you'll notice the "step" in the background. http://sager.hiringhook.com/
I'm working with a custom theme created specifically for this site. Everything looks good in Chrome and Firefox, IE is just being a thorn in my side.
If anyone has a simple fix, please share..before I lose my hair.
I looked for the step you mentioned but didn't see any difference in the site from Chrome to IE8. The logo shifts down along with the featured photo in compatibility mode but nothing else seems to change across browsers. Do you have a screenshot of what you see in IE? I would love to replicate and help you solve the issue.
I've got this problem while doing the scroll bar for both iPad and browsers. The style is working fine with Opera, Safari, Firefox and Chrome. However the style doesn't show in Internet Explorer and it appears the wired horizontal scroll bar on the page too.
You can find a link to the page here.
Does anybody know how to fix this issue?
Looking at the iScroll website and demos it looks like IE isn't supported. Go ahead and try it in IE http://cubiq.org/dropbox/iscroll4/examples/simple/. You may want to try another library such as this one http://www.hesido.com/web.php?page=customscrollbar which seems to work just fine in IE.
On my website at http://JonathansCorner.com/, the site as a whole displays well in mobile Safari, and the homepage displays well on (desktop) Firefox, Opera, Safari, and IE, but the homepage specifically does not look at all good on mobile Safari:itdisplaysonewordperline,stretchingoutthetextvertically.
I've tried several things to see if I can alter the behavior, and nothing I've tried seems to budge it. Moving the slideshow to an iframe, commenting it out, correcting HTML errors, commenting out the mobile stylesheet, nada. Every other page I've tried within the site looks as intended in mobile Safari, and I have not been able to duplicate the issue in any desktop browser.
Comments on how I can get the homepage to look reasonable in mobile Safari?
If you look at the site using regular Safari, and then attempt to minimize the window, you'll see that the same thing happens.
Setting the minimum width property may help.