On my site http://stevengeorgeharris.com I have a fixed header, which scrolls down with the user. It works perfect in Firefox, Safari, ie, ipad, iphone but not CHROME. As I scroll down the header (#nav) disappears/jumps around then reappears further down. It seems to be when it scrolls over #info.
Can anyone help me debug it, tried for ages!
Get rid of the z-index on your video.
I tried your link in chrome and this is what I got while scrolling:
link
Try removing top and left, and use margin-top instead. This should work.
Related
Scrollbar disappeared when I add mouse to mac at first time.
please look at this links.
demo link
When I add mouse to my mac, scroll bar disappeared and a white color box coming right top corner. I do not know why. firefox working fine. chrome safari, and opera i.e had this issue. After refresh the page i could see scrollbar. Help me if you know/face this issue before.
screenshots here... who does not able to understand my issue.
screen shot one after i insert mouse to mac machine scroll disappeared and getting square box right top corner:
after I refresh the page i get see scrollbar.
You can change the setting in the preferences. By default, the scroll bar is hidden with mac products.
Odds are if a user is using a Mac, they're already aware of this and it's considered a feature to them.
But, if you really need it, try using the webkit css pseudo selector ::-webkit-scrollbar
This will only work in Safari and Chrome.
Making a website for my university project and have hit a small problem when viewing my site in Chrome (which is usually great for compatibility so I'm probably playing dumb). I've set the header bar and 'controls_container' as both position:fixed in order to have them in view when scrolling down the page, yet in Chrome these aren't fixed, whereas in IE, Safari and Firefox it works as intended.
This is the top of the page viewed in Chrome:
This is after scrolling down in Chrome:
(Header bar scrolls up, as does the breadcrumb buttons on the left)
This is after scrolling in IE:
Can't remove z-index from the video as it's my background video.
Here is the link to my site, any help would be much appreciated!
http://conet.co.uk/p_c_h/explore.html
The elements you’ve mentioned — header bar and .controls_container — are actually fixed. The problem here is in rendering, which acts odd, when you use background video.
Try to add backface-visibility: hidden; or transform: translateZ(0); to the styles of fixed elements and the problem go away. These attributes put your fixed elements in separate rendering layer — stacking context — and browser renders them correctly.
Looks like a rendering issue in Chrome. If you delete the "banner_video" node, everything works as expected.
See https://code.google.com/p/chromium/issues/detail?id=402211
I have a site that works fine in Chrome, Firefox, IE7-11, android, iOS (both ipad and iphone) yet for some unknown reason all elements except the header and rotating banner are invisible in Safari and only Safari.
The elements are all present and when inspected the outlines of each individual elements appear.
If I disable CSS the elements all appear and are there.
As I scroll through the page, which for the post part is just blank white space occasionally some of the elements will reappear in a very glitchy way, perhaps just a thin vertical stripe of the element will be visible then it will disappear.
I can't make the site public at the moment, but here is a screenshot showing the issue:
Has anyone had something similar happen before in Safari, or have any suggestions?
It looks like the div is hidden.
Add z-index:1; to the div with tdp_row_fullwidth center-yes light-no class and the div shows up in safari for me.
What worked for me was the font-family that was being used was not loaded in Safari, once I changed it, the element "showed" up.
We have a page with a table of invoices on it inside an iframe. In IE, horizontal scrolling works and looks fine. On Chrome, if you scroll over to the right, then back to the left, you see these ugly vertical lines:
This seems like a problem with doctype, but I've tried changing that and it hasn't helped. This only occurs in Chrome and only after horizontal scrolling; Firefox and IE do not show these. I'm thinking that it has to do with some HTML on the page that Chrome is rendering differently but I haven't been able to find exactly what it is.
Has anyone seen this before or have an idea on how to fix it?
I believe it's related to a Chrome bug:
https://groups.google.com/a/chromium.org/forum/?fromgroups#!topic/chromium-bugs/eUfzp3UJDwo%5B1-25%5D
A possible workaround (or hint for a workaround here):
Chrome bug: iframe rendering lines on screen when scrolling up
Having a slight problem with
http://jquery.com/demo/thickbox/
In IE8, the overlay window doesn't scroll when you scroll down in the browser. So if you click something at the bottom of the browser window, the overlay window pops up but at the top of the screen so you have to scroll back up. This only happens in IE8, all other browsers the overlay window follows. Help? Thanks
I had the same problem, but only when using <frames> or <iframes>. Being unable to correct the problem, along with a few other bugs, I decided switch to using Shadowbox http://www.shadowbox-js.com/. I found it to be ALOT more flexible. Just a suggestion. But as for the IE8 problem you reported, I never encountered the issue in a parent window, just when using frames.