I started experiencing an issue with images not being displayed on my jssor carousel slider; this issue is only present on Chrome (latest Version 45.0.2454.101 m) - it works fine under Firefox, Explorer and mobile browsers.
Drilling down, it seems that user agent stylesheet adds/applies this element:
transform: perspective(2000px);
When in Chrome's Developer Tools, unchecking this style option results in image being displayed just fine.
Any help with explanation what is going on and how to deal with this issue is much appreciated.
Thank you,
Michael
Related
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.
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 have the following website which I developed a custom wordpress theme for using bootstrap and ubermenu for the menu: http://xtremenutrition.co.za/d-base-staging
Menu alignment looks fine in Chrome, Firefox and internet explorer. Safari on an Apple machine is an issue, where it goes over the logo and if you resize the browser (before the mobile breakpoint), it doesn't look right.
I need help from someone with an Apple and safari computer. Seems I need advice on CSS to recitfy the problem. I'm not sure how to tackle this and what's worse, I have a windows machine only.
Any advice on code/sorting it out would be greatly appreciated.
Thanks.
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've been trying out a bit of code posted to make image rollover buttons using only css,
this seems to work fine.
local testing showed no problems, IE, Firefox, safari all ok. even chrome displays as intended on the local version.
Once i move to a hosted test, IE, Firefox and Safari all display as intended but chrome offsets all the buttons right about 8-10 pixels.
here's the test page
http://www.fierysurprise.pwp.blueyonder.co.uk/bga/bgd.html
can anyone enlighten me as to what's happening?
site built in Kompozer
I assume you're referring to the squares under the "architectural design..." phrase.
I can't recreate this problem in Chrome v5.0.375.125.
What version of chrome are you using? Chrome tends to doggedly cache resources. Have you tried a cache refresh?
What version of Chrome are you using? I looked at your site in Chrome 5 and can't seem to tell a difference between any of the browsers you've mentioned.