Wordpress Jupiter Chrome CSS issue - css

I can't for the life of me figure out how to fix this issue... The jupiter theme is showing a white overlay on top of the full screen video in chrome but displays fine in firefox... I've looked through the css and can't seem to find any issues... but the strange thing is that when I open the inspector and delete the main container for the page section then hit command Z the white space dissappears and I can see the whole video... Any help would be greatly appreciated.
Link:
http://s579222454.onlinehome.us/about-us

Related

Banner image does not appear on Safari

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.

Strange Wordpress issue just in Firefox

I have a strange issue happening just in Firefox that disappear when I resize the browser page.
The issue is on the header, normally, on a Desktop mode, the logo it's in the center with two menu, one on the left and one on the right. In Firefox I see just the logo on the left and the menu all on the right part.
I tried to explore the code and see where this issue is coming from but I can't find any solution. Can someone help me please?
https://ruggerocarrara.com
Thank you so much!

Chrome and fonts issues

This is an issue I noticed in an application that is using icon fonts through all fonts are having issues. Basically the issue is that when I leave the application in a background tab for awhile, sometimes when I come back the fonts get reset to something (most but not all icon fonts show up as squares) and when I move my mouse over the screen, the fonts are switched back to what they should be.
I have made a video to show the issue:
https://vimeo.com/86414508
Any help with this would be greatly appreciated.
It seems to be a known issue in Chrome as it's been answered here :
Icon-font sporadically shows up as squares and back to icon on hover
It's a little annoying but I guess it won't be too much of a problem since they come back when you hover the page again and I'm sure it'll be fixed in the next versions of Chrome.

Slideshow Causes Weird Graphical Glitch

Unfortunately I can't reproduce this in a JSFiddle or otherwise, when I do it simply works properly. From there I still was not able to narrow it down to figure out what is causing it. Here is the link to the development site:
http://dev.fusion-inc.net
This bug is only visible in Chrome, I am using the latest version, and the problem still appeared on the previous version (I just updated this morning).
Watch the links in the content of the home page carefully, when the image slider transitions, you will see a change in the text of the links. It's almost as if the anti-aliasing changes somehow and causes the text to become just a smidge thinner. You may need to zoom in to see it well.
Any idea what's causing this? I'm completely stumped, the only thing I can figure is something in the rendering of the animation of the slider is tweaking some anti-aliasing or something causing the fonts to move a bit. Even the youtube and linked in images in the footer have the same problem.
#content * {-webkit-backface-visibility: hidden;}
The above fixed it thanks to someone in Chat.
Similar problems should reference this link: Prevent flicker on webkit-transition of webkit-transform

error with border on the left hand side in google chrome and safari?

I have recently launched a site built on word press using a heavily edited child theme of the twenty ten theme, the problem is when viewed in google chrome or safari a small portion of the left hand border on the sidebar sat on the left is displaying the wrong colour. Its not a big issue and it goes away when you scroll to the bottom of the page, its more annoying than anything just wondering if any one else had encountered this.
I am using different colour borders to get the pressed in effect if this matters.
The site is located at www.paintedroom.co.uk
I have found what is causing this bug it is the border-radius property. when removed the bug goes away still not sure how to fix though.

Resources