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
Related
I’m seeing an issue where text only shows up after scrolling the HTML elements out of viewport or after switching to another tab and back. The same issue also happens in WKWebView. Is there a way to prevent this issue from happening? These sections can be scroll horizontally. Not sure if that’s related, but I find it very odd that Safari doesn’t render text that’s in the viewport.
In the attached image, you can see that there are blank rows under EU, UK and US.
Any suggestion is appreciative.
--
Added another image showing HTML elements. Element with .wrapper-row is the one that has overflow-x property. This works perfectly fine on desktop including when simulating to mobile responsive size, but has an issue even with Chrome on iOS.
I found a workaround. After playing around with debugger, I believe this has to do with iOS trying to optimize what content to load. The problem is that it's incorrectly optimizing and not loading content within the initial visible viewport. This is a similar issue where sometime I have to trigger a fake scroll so that content aligns properly in Safari on iOS especially with position fixed or absolute.
To make sure content shows up. I did the following:
$('.selector').css('visibility', 'hidden');
setTimeout(function(){
$('.selector').css('visibility', 'visible');
}, 10);
This must be done outside of the main thread execution or it doesn't work. That's why I'm putting a small timeout before executing it.
I found an article that mentioned that this has to do with
-webkit-overflow-scrolling: touch
and that a solution is to add
-webkit-transform: translateZ(0px)
but that didn't work for me. You can reference that thread here just in case my solution doesn't work for you and this one does.
iOS textarea text hidden when using -webkit-overflow-scrolling: touch
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.
I have the content of my website in an absolute positioned div that fills the whole screen. The scrolling on this div is normally clunky, as it's not the native momentum scrolling. Solution? Append -webkit-overflow-scrolling: touch; to the div.
Momentum scrolling works now, but when I scroll down the page, the div elements aren't showing up. The console shows no errors, nothing is wrong with the actual page, but the individual posts (the div's) don't show. Here's an example:
Can anyone confirm this on their iPad, or suggest a fix? I'd rather not use something along the lines of Scrollability. It might be that the iOS6 beta is causing this, but I'd like to be reassured.
You can view this site on your iPad
And if anyone wants me to explain my bookmarks, I will gladly do so.
Currently .post CSS class uses position: relative. If you remove that line, the issue goes away. Apparently relatively position elements are hidden when not within the view. Not exactly sure the why the iPad does this or if it is a bug. In my experience, iPad devices try to run as efficiently as possible. For example, if you scroll JS animations are frozen. Perhaps this is a technique to make iPads render pages more efficiently. Hopefully that helps.
This article maybe be related and have a work around: CSS3 property webkit-overflow-scrolling:touch ERROR
Using '-webkit-overflow-scrolling: touch' hides content while scrolling/dragging
I have a site that works fine in android browser, FF, Chrome, Safari IE9+ but in IE8 the upper half of an elements background disapears as well as the background color on a couple of input elements.
I have run through IE debugging tools and also W3C and there is nothing that is coming up that would make this occur.
The site in question is http://ukritic.com if anyone can check it in FF then IE8 and maybe suggest what could be causing the problem it would be greatly appreciated.
If you need anything from me let me know and I will post it up for you.
ADDITION:
The problem that is occurring is that in IE8 the white background containing the content is only visible 1/2 way down the page but is hidden on the upper half of the page and also hidden where the facebook like box is located.
In all other browsers the entire content container shows the #FFF background from the top of the page to the bottom of the page.
We have tested in IE compatibility and normal mode but the problem persists.
What I do notice is that while the page is loading the content container is white but as soon as the page loads completely it disappears on the top half and the facebook container.
Thanks
~M
The problem was in the border-radius.htc file as soon as I removed that call the page rendered perfectly.
There really is no effective way of rendering round corners on ie8 as the .htc file needs a relative path to the page that is rendered which does not really work well with dynamic depth address bars (shortUrls).
Guess I will have to settle for rounded corners only in IE9+ and all other browsers.
Thanks for the input
I don't have any code to show as it is on a intranet system. However I have noticed a couple of weird things when looking at it in IE6. This isn't the usual box model problem or IE6 rendering things differently.
One thing that I noticed is on a div where I have a gradient background with repeat-x attribute. When the page loads in IE6 (and any other browser) it looks fine. However when I scroll down the page and back the background appears to repeat in the y direction too?!
Also I have a footer div, which is flush to the content. Again at first this is fine. However when I scroll it off the page and back there appears a gap, which gets bigger when I scroll off and back again. Once more returns it to what it originally (and should) looked.
Are there known IE6 rendering bugs for such problems or is it just bad coding?
Thanks.
Try adding zoom: 1 to blocks with problems. If it works — it's hasLayout problem.