Google Chrome Z-index is not working - css

I am working on one website. There is chat box which display well in firefox. But not in google chrome. I have try many trick but i cant fix it. Will you give me some solutions for it.
The site is http://ng.whoosmart.com/index.php?route=product/product&product_id=53
Its opencart site when you open this url in firefox its display well when you scroll down page it is in the footer.
But when you open in google chrome then its not display when you scroll down to page.

Add chatbox div in the end just before closing of body tag it will position correctly on chrome.

Related

why do I see the horizontal scrollbar in the inspect (Ctrl+Shift+I) of the google chrome?

when I'm in the inspect state (press Ctrl+Shift+I on google chrome) in the google chrome there is a problem:
my page has a navbar menu, when I'm on the large screen there is no problem but whenever I resize the page, that navbar is shown in the right of the page(you can't see unless you scroll horizontally)
but I don't have this problem when I see my page normally without seeing the inspection of google chrome.
in the CSS I've hidden scroll horizontally (in the body I've written overflow-x: hidden)
I want to fix this issue because whenever an employer sees that in the inspect of google chrome that will not be so good.

My <iframe> position changes in safari

I have an <iframe> that displays video content when a menu item is clicked. The position of the iframe is correct when I open the page in Chrome. However, the iframe and side menu div shifts out of position when I open the page in Safari and Firefox. I need to have them open correctly in all browsers for a presentation. Here is my temp page:
http://www.foxsportsgraphics.com/Lab-presentation/new.html#
Excuse my messy code. I am fairly new to doing web pages from scratch.

Accelerated Mobile Pages (AMP) visibility issues with Ads on Internet Explorer 11

Cube ads that are being displayed inside an iframe on IE11 are getting a visibility: hidden inline style added to it, which hides the ads. Does anyone know a workaround on this? This is not occurring on other acceptable browsers.
That looks like a bug. Have you reported it to the AMP Project on their GitHub page?

Self-fixing 'broken' floating behavior in Google Chome

I am experiencing some weird floating-behavior in Google Chrome within the first responsive project I am working on.
I've uploaded an anonymized version of my responsive header here: http://files.uiux.de/140618_header/
Whenever I visit this page on a desktop with Google Chrome, having no cache of the page, the contact-information in the right-hand corner seem to have a margin-top and 'broken' floating of the icons. As soon as I reload the Page, the position is automatically fixed.
I can reproduce this behavior by resizing the Chrome window to it's narrowest setting, refreshing the page and then resize Chrome until the contact-information shows up again.
I am baffled by this behavior. Firefox and Safari work just fine. Can someone explain to me what is happening there and maybe offer a possible solution?
Here's a screenshot of both the initial rendering and the one after refreshing.

Google Maps API killing CSS animations in Safari

I have a page with some CSS animations. This page also has a map generated via the Google Maps API.
You can see a stripped down demo here:
http://dev.timmurtaugh.com/demo/projects-map-debug.html
If you click the "Toggle Size" size link before hovering over the "Main Nav Item" you will see the toggled element resize as expected.
However, once you hover over the nav element, which should trigger a flyout menu via CSS, not only does the flyout menu not appear, the "Toggle Size" link stops working.
As if this weren't odd enough, the web inspector thinks everything is working as normal — it reports that size of the box is changing, when visually it is not.
I have tried isolating the map in an iframe, and I get the same results.
This seems to happen only in Safari (5.1.5) / Mac, not in any other browser that I've checked (latest Chrome / Firefox / Internet Explorer 9).
I have tried the suggestions in this question: jQuery jScrollPane issue/conflict with Google maps on Safari
... and in this one: Mac Safari 5.0.4 bug when using Google Maps API
Is there anything I can do?
With the over-rides mentioned above (visibility:visible; & -webkit-tranistion:opacity...;) this seems to work for me.
http://jsfiddle.net/vxfhT/1/

Resources