I am trying to apply this sticky footer pattern to my template:
http://ryanfait.com/sticky-footer/
But in Internet Explorer 9, I am seeing a scroll bar, and if I scroll down lots of white space appearing below the footer:
It gets even weirder, as I stripped more and more out of my template until I was left with just basic layout, bootstrap, footer css, jquery and jquery-ui.
Jquery and jquery-ui libraries are merely included in the head, no other java script loads that could call them.
The problem still manifests, until I remove jquery-ui from the head. Then the page renders ok.
Here are some live examples:
With jquery-ui
Without jquery-ui
Also, the white space disappears if I resize the window. Clutching at straws I've even tried triggering $(window).resize() on page load, but no such luck.
Does anyone have any idea why oh why internet explorer 9 is adding this mysterious white space and how to make it stop? I thought IE9 was supposed to be the most compliant of the IE species...
Thanks for any help, I've been pulling my hair out all day over this issue.
Resorted to debugging jquery-ui, found some obscure code that runs on document ready that appends a div to the end of a page to fix a 3 year old IE6 issue!
jQuery UI 1.8.17 Line 225:
var body = document.body,
div = body.appendChild( div = document.createElement( "div" ) );
$.extend( div.style, {
minHeight: "100px",
height: "auto",
padding: 0,
borderWidth: 0
});
$.support.minHeight = div.offsetHeight === 100;
$.support.selectstart = "onselectstart" in div;
// set display to none to avoid a layout bug in IE
// http://dev.jquery.com/ticket/4014
body.removeChild( div ).style.display = "none";
Removing this fixes my problem, I think IE9 compatibility is more important than IE6.
Are you using any css class names shared with jQuery UI? They all start with ui-, e.g. ui-icon, ui-widget-content, etc. Take a look at CSS Framework docs for more information.
Related
I just created an Arabic version a website and noticed that Chrome sometimes shows a totally blank page until the window is resized and then everything instantly becomes visible.
Arabic is a RTL language, so the <html> tag has dir="rtl" lang="ar" added to it. This is the only difference between it and the English site.
This is the site. You may have to click the logo a few times in order to see it show blank.
I've noticed this problem too and I searched the internet in English and Arabic but couldn't find the cause of the problem. I found a workaround to fix it though; use the following jQuery script in your rtl-directed webpages:
//Chrome RTL UI Issue Fix
$(document).ready(function(){
$(window).load(function() {
$( "body" ).animate({
scrollTop: 1
});
});
});
All it does is that it scrolls the page by only 1px right after all the page elements have been loaded. You can add a code that scrolls it back if you want.
I fixed this problem and I want to share it with you.I think this problem is only for gc on mac os.
How to fix it?its really easy.
hide you body in your css and then show it when page load and every thing will work.
/*Add this to your css to hide body */
body {
display: none;
}
<!-- Add to your html to js file to show your body again -->
$(window).load(function() {
// When the page has loaded
$("body").show()
});
The link to the page does not work. Is the page available on the futurism site?
I downloaded the futurism.com page and added dir="rtl" lang="ar" to the html tag. I have reloaded the page 50 times. I cannot reproduce the problem.
My copy of the page is running on Apache with Multiviews.
I have added a language directive for Arabic.
I have two copies of the file, futurism.htm.en and futurism.htm.ar
I have set the language in my browser to Arabic [ar].
The Arabic pages is negotiated by Apache.
The page loads without a problem.
I have also created another page with Unicode Arabic letters. It loads and displays the Arabic right-to-left without a problem.
I had the same problem.
Just don't apply direction to the body or html tags.
<html>
<head>
<style>
.rtl {
direction: rtl;
}
</style>
</head>
<body>
<div class="rtl">
<!-- Your Codes Here ... -->
</div>
</body>
</html>
I had a similar problem to yours but my site showed fine until it was manually refreshed on Android phones, after which the page would go blank. This behaviour could also be reproduced in developer tools on Chrome and Opera (both use the Blink engine).
First, I applied a fixed positioning rule to the body,
body { position: fixed; }
Then, I reverted the positioning on page load using jQuery,
jQuery(window).load(function() {
jQuery('body').css('position','static');
});
Wordpress became really annoying when working on RTL, you need to resize or scroll to show content. I think it is only happening on MacOS.
I've noticed that some websites don't have this issue, so comparing the html I noticed that the working websites have many class in the <html>, like: js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation...
which added by modernizr.js (v2.8.3)
I added this to my page header, and the blank page issue disappeared:
<script src="/js/modernizr.js"></script>
I am not sure what is going on, but may be it will give some starting point to figure out the real cause of the issue.
I have this issue with my Wordpress and I fixed it by adding this javascript code
window.scrollTo(0, 1);
window.scrollTo(0, 0);
in mobile web application I'd often use modals.
Some modals can expand sizes and thus were made scrollable.
How can I enable higher z-indexed modal to be scrollable and set background div not to scroll?
b/c whenever I scroll with two fingers on the current modal, sometimes background scroll, sometimes foreground scrolls.
I think you can't fix background with background-attachment: fixed;
you have to apply position: fixed on it
and then
You should try iScroll 4
"iScroll finally received a complete rewrite. Now it’s smoother than ever and adds some new important features: pinch/zoom, pull down to refresh, snap to elements and more custom events for a higher level of hackability."
or
skrollr 0.6.25
Stand-alone parallax scrolling JavaScript library for mobile (Android, iOS, etc.) and desktop in about 12k minified.
Other Helpful link
http://webdesigner-webdeveloper.com/weblog/fullscreen-images-for-the-ipad-ios-and-mobile-safari/
https://github.com/louisremi/background-size-polyfill/issues/27
http://bradfrostweb.com/blog/mobile/fixed-position/
Hope this answer little bit helpful for you. :)
There are a couple "hacky" ways to get this working. Here are a couple off the top of my head (that I've experimented with in the past) - if you're targeting iOS devices, just skip to #3...
1) Use JS and prevent scrolling. You would want to check if the element within the modal is scrollable or not. If it's not, you disable touch events, preventing the user from scrolling. Be mindful of direction. Also, devices that would typically "rubberband" the scroll will stop.
Sorry, no fiddle to demonstrate.
2) Apply absolute positioning to the body element with overflow hidden. As weird as it sounds, if you apply absolute position to the body, you can prevent the page from scrolling. However, layout issues might prevent you from using this. In addition, when you apply the position to the body, any scroll offset will be removed, and the page will scroll to 0,0. Also, the page will still rubberband (if the device supports rubberbanding) resulting in a weird interaction.
JS fiddle: http://fiddle.jshell.net/L7FJF/show/
3) If you're targeting iOS devices (or newer Chrome browsers on Android), there's a fun workaround when using -webkit-overflow-scrolling: touch and rubberbanding. Using JS, you can always offset the scrollable div +/-1px to prevent background scrolling. (To be honest, this is my favorite work around since it works great. However, it's limited to just iOS w/ overflow-scrolling support.)
JS fiddle: http://fiddle.jshell.net/jDqSP/show/
Hope this helps!
assume the only div you want to allow to scroll is
<div class="scroll">...</div>
here is the code. works on ios and android, also handled the problem that when son has scrolled to end, parent's scroll will automatically be triggered.
$(document).on('touchmove', function(e) {
e.preventDefault();
}).ready(function() {
$('.scroll').on('touchstart', function(e) {
this.allowUp = (this.scrollTop > 0);
this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
this.prevTop = null;
this.prevBot = null;
this.lastY = e.originalEvent.touches[0].clientY;
}).on('touchmove', function(e) {
var event = e.originalEvent;
var up = (event.touches[0].clientY > this.lastY), down = !up;
this.lastY = event.touches[0].clientY;
if ((up && this.allowUp) || (down && this.allowDown))
event.stopPropagation();
else
event.preventDefault();
});
});
when you don't need to ban scroll, you just remove the listener like this:
document.addEventListener('touchmove', handleTouchMove, false);
document.removeEventListener('touchmove', handleTouchMove);
from
https://stackoverflow.com/a/13278230/1982712 & prevent full page scrolling iOS
(which is the questioner's own answer).
(my main account has been banned :( )
I was facing same problem and CSS property touch-action: none; solved my problem on iPhone with Safari browser. More infrmation here https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
In IE10, the scrollbar is not always there... and when it appears it comes on as an overlay... It's a cool feature but I would like to turn it off for my specific website as it is a full screen application and my logos and menus are lost behind it.
IE10:
CHROME:
Anyone know a way of always having the scrollbar fixed in position on IE10?
overflow-y:scroll doesn't seem to work! it just puts it permanently over my website.
It may be bootstrap causing the issue but which part I have no idea! see example here: http://twitter.github.io/bootstrap/
As xec mentioned in his answer, this behavior is caused by the #-ms-viewport setting.
The good news is that you do not have to remove this setting to get the scrollbars back (in our case we rely on the #-ms-viewport setting for responsive web design).
You can use the -ms-overflow-style to define the overflow behavoir, as mentioned in this article:
http://msdn.microsoft.com/en-us/library/ie/hh771902(v=vs.85).aspx
Set the style to scrollbar to get the scrollbars back:
body {
-ms-overflow-style: scrollbar;
}
scrollbar
Indicates the element displays a classic scrollbar-type
control when its content overflows. Unlike -ms-autohiding-scrollbar,
scrollbars on elements with the -ms-overflow-style property set to
scrollbar always appear on the screen and do not fade out when the
element is inactive. Scrollbars do not overlay content, and therefore
take up extra layout space along the edges of the element where they
appear.
After googling a bit I stumbled across a discussion where a comment left by "Blue Ink" states:
Inspecting the pages, I managed to reproduce it by using:
#-ms-viewport { width: device-width; }
which causes the scrollbars to become transparent. Makes sense, since
the content now takes up the whole screen.
In this scenario, adding:
overflow-y: auto;
makes the scrollbars auto-hide
And in bootstraps responsive-utilities.less file, line 21 you can find the following CSS code
// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
#-ms-viewport {
width: device-width;
}
This snippet is what's causing the behavior. I recommend reading the links listed in the commented code above. (They were added after I initially posted this answer.)
SOLUTION: Two steps - detect if IE10, then use CSS:
do this on init:
if (/msie\s10\.0/gi.test(navigator.appVersion)) {
$('body').addClass('IE10');
} else if (/rv:11.0/gi.test(navigator.appVersion)) {
$('body').addClass('IE11');
}
// --OR--
$('body').addClass(
/msie\s10\.0/gi.test(navigator.appVersion) ? 'IE10' :
/rv:11.0/gi.test(navigator.appVersion) ? 'IE11' :
'' // Neither
);
// --OR (vanilla JS [best])--
document.body.className +=
/msie\s10\.0/gi.test(navigator.appVersion) ? ' IE10' :
/rv:11.0/gi.test(navigator.appVersion) ? ' IE11' :
''; // Neither
Add this CSS:
body.IE10, body.IE11 {
overflow-y: scroll;
-ms-overflow-style: scrollbar;
}
Why it works:
The overflow-y:scroll permanently turns on the <body> tag vertical scrollbar.
The -ms-overflow-style:scrollbar turns off the auto-hiding behavior, thus pushing the content over and giving us the scrollbar layout behavior we're all used to.
Updated for users asking about IE11.
- Reference https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)
Try this
body{-ms-overflow-style: scrollbar !important;}
This issue is also happening with Datatables on Bootstrap 4. Mi solution was:
Checked if the ie browser is opening.
Replaced table-responsive class for table-responsive-ie class.
CSS:
.table-responsive-ie {
display: block;
width: 100%;
overflow-x: auto;}
JS:
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) //If IE
{
$('#tableResponsibleID').removeClass('table-responsive');
$('#tableResponsibleID').addClass('table-responsive-ie');
}
Tried the #-ms-viewport and other suggestions but none worked in my case with IE11 on Windows 7. I had no scroll bars and the other posts here would at most give me a scroll bar that didn't scroll anywhere even though there was plenty of content. Found this article http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/ which reduced to . . .
body {
overflow-x: visible;
}
. . . and did the trick for me.
On my I have a fixed DIV at the top, 3 fixed tabs and a fixed div at the bottom (this will only be shown when logged in - in the future).
I am getting poor scrolling performance on Chrome only - FF & IE are fine.
I have ready some problem reports about Chrome, Fixed Positioning and Scrolling and wanted to see if anyone had any suggestions? I really would like to fix these elements in their locations but I would also like good scrolling performance in Chrome.
Any Ideas on a fix?
Note: its much more noticeable when zoomed on chrome...
Update: I have read other people have a similar issues and updated this Chrome issue, which was later merged into 136555, allegedly fixed since Chrome 26.
Problem and How to Monitor It
The reason for this is because Chrome for some reasons decides it needs to redecode and resize any images when a fixed panel goes over it. You can see this particularly well with
► Right-Click ➔ Inspect ➔ Timeline ➔ Hit ⏺ Record
► Go back to the page and drag scrollbar up and down (Mouse-wheel scrolling not as effective)
Edit (9/1/2016): Since posting this, Chrome added new features to help monitor this:
► Right-Click ➔ Inspect ➔ Rendering (Bottom tabs)
➔ ☑ Scrolling Performance Issues
➔ ☑ Paint Flashing
➔ ☑ FPS Meter (less important, but can be useful)
This will help you identify exactly what elements require repaints on scrolls and highlight them clearly on screen.
This seems to just be a problem with the method Chrome is using to determine if a lower element needs to be repainted.
To make matters worse, you can't even get around the issue by creating a div above a scrollable div to avoid using the position:fixed attribute. This will actually cause the same effect. Pretty much Chrome says if anything on the page has to be drawn over an image (even in an iframe, div or whatever it might be), repaint that image. So despite what div/frame you are scrolling it, the problem persists.
.
The Easy Hack Solution
But I did find one hack to get around this issue that seems to have few downside.
By adding the following to the fixed elements
/* Edit (9/1/2016): Seems translate3d works better than translatez(0) on some devices */
-webkit-transform: translate3d(0, 0, 0);
Some browsers might require this to prevent flickering
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
This puts the fixed element in its own compositing layer and forces the browser to utilize GPU acceleration.
EDIT: One potential issue was pointed out to me by albb; when using
transform, all descendant position:fixed
elements will be fixed to that composition layer rather than the
entire page.
.
Alternative Solution
Alternatively, you could simply hide the top navigation while scrolling and bring it back in afterwards. Here is an example that could work on the stackoverflow.com's header or a site like theverge.com if pasted in DevTools > Console (or manually type "javascript:" into this pages URL bar and paste in the code below after it and hit enter):
/* Inject some CSS to fix the header to the top and hide it
* when adding a 'header.hidden' class name. */
var css= document.createElement("style");
css.type = 'text/css';
css.innerHTML = 'header { transition: top .20s !important; }';
css.innerHTML += 'header.hideOnScroll { top: -55px !important; }';
css.innerHTML += 'header { top: 0 !important; position: fixed !important; }';
document.head.appendChild(css);
var header = document.querySelector("header");
var reinsertId = null; /* will be null if header is not hidden */
window.onscroll = function() {
if(!reinsertId) {
/* Hides header on scroll */
header.classList.add("hideOnScroll");
setTimeout(function() { header.style.visibility = "hidden"; }, 250);
} else {
/* Resets the re-insert timeout function */
clearTimeout(reinsertId);
}
/* Re-insert timeout function */
reinsertId = setTimeout(function(){
header.classList.remove("hideOnScroll");
header.style.visibility = "visible";
reinsertId = null;
}, 1500);
};
The first solution of #Corylulu works, but not completely (still a little stutter, but much less).
I also had to add -webkit-backface-visibility: hidden; to the fixed element to be stutter free.
So for me the following worked like a charm to prevent scroll down stutter in chrome when using fixed elements on the page:
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
Edit: Webkit-transform and webkit-backface-visibility both cause blurry fonts and images. So make sure you only apply both on the hover state.
Add this rule to your fixed element,
will-change: transform;
Read about solution from Here,
and read about will-change property from Here.
There's a recent bug report on this particularly annoying issue:
http://code.google.com/p/chromium/issues/detail?id=155313
It has to do with the combination of floating elements and large images. Still a problem on Chrome Canary 24.0.1310.0.
There are a number of ways you could speed up this front end, try out the PageSpeed Insights Chrome plugin for some ideas. Personally I'd recommend rebuilding this front end with the same design on top of a framework like Twitter's Bootstrap, but if you'd like some specifics on this front end:
As you say, the positioning of your header bar is causing the most time in terms of CSS rendering (CSS stress test results). Get rid of that big image that's in there and replace it with a 1px wide background image. You're also resizing images like your logo (and every other image in this header) unnecessarily, replace with actual-size versions
You could save a lot of bytes transferred by optimizing all your content images
I have a client with an event planning site asking his pages to fade into one another. I have no idea how I can accomplish this. Any ideas? Is there anyway to do this without flash?
Definitely get hold of a javascript framework. jQuery is popular (because it's ace), but there's Mootools, Prototype, and Dojo to name a few.
I'm not sure if crosssfading can be done reliably across all the browsers without popping / jumping artifacts. Even the example Dancrumb points to is a bit ropey (no insult intended Dan).
Process-wise, you could have 3 layers (top to bottom)
screen (initially invisible)
page (one)
container (initially empty)
when the user tries to navigate to the second page, load it into the container using ajax. Once the page has loaded, start fading up the screen. Once the screen is at 100% opacity, manipulate the DOM to move the loaded content out of the hidden container and into what is now page two, then start fading the screen back out again.
EDIT on a sidenote - I would summon up all my webdev mojo and try to convince the client what I bad idea it is to have complete page fades on an site designed to communicate information. Obviously I know sweet FA about this project so feel free to slap me down; but I've never seen a case where fancy effects and transitions has improved the usability of a site when used at the page level. I know it'd irritate me if I had to wait for a fancy transition to finish before I could continue navigating...
Page Transitions are supported natively with IE, using the META tag.
See the Microsoft page about Filters and Transitions for more
For a browser agnostic approach (using Javascript), see this Stack Overflow question
This should work, without relying on Ajax (jQuery) :
$(function(){
/*
Add this code to every page.
We start by hiding the body, and then fading it in.
*/
$('body').hide().fadeIn('fast');
/*
Now we deal with all 'a' tags...
*/
$('a').click(function(){
/*
Get the url from this anchors href
*/
var link = $(this).attr('href');
/*
Fade out the whole page
*/
$('body').fadeOut('fast', function(){
/*
When that's done (on the 'callback') send the browser to the link.
*/
window.location.href = link;
});
return false;
});
});
Worth noting however is that if you're loading js at the bottom of the page (as we're often told to do), on a slow page load the page might be visible, then invisible, and then fade in again... Which would look very strange.
A solution would be to just hide the body in CSS, but you might, possibly, have visitors with JS turned off but CSS turned on, then they'll just have a blank page. Alternatively you could use a tiny amount of js at the top of the page (not relying on jQuery) to hide the body.
Lastly, however, why? I think if I visited your site these effects would begin to seriously annoy me pretty quickly. Why not just take the user to the page they asked for?
Won't work in IE, but WebKit and FireFox are both on the boat with CSS transitions, and they run a lot more smoothly than any JavaScript.
http://www.w3.org/TR/css3-transitions/
This might be a little late, but to Fade a page In when it loads, and then fade out On-click I'd suggest using jQuery. I wrote this quick little script that will do the trick that your after. Have a look at it, and I will explain below.
The CSS
body { display:none; }
The JS
$(document).ready(function()
{
$( 'body' ).fadeIn("slow", 0.0);
$( 'body' ).fadeIn("slow", 0.1);
$( 'body' ).fadeIn("slow", 0.2);
$( 'body' ).fadeIn("slow", 0.3);
$( 'body' ).fadeIn("slow", 0.4);
$( 'body' ).fadeIn("slow", 0.5);
$( 'body' ).fadeIn("slow", 0.6);
$( 'body' ).fadeIn("slow", 0.7);
$( 'body' ).fadeIn("slow", 0.8);
$( 'body' ).fadeIn("slow", 0.9);
$( 'body' ).fadeIn("slow", 1.0);
$('a').click(function(){
$('body').fadeOut();
setTimeout("nav('"+this.href+"')",1000);
return false;
});
});
function nav(href){
location.href=href;
};
The CSS holds back the display of the body, which allows the JS to start the fade effect on-load of the page. The body fadeIn is set at intervals to allow a smoother fadeIn effect, giving the site time to load. I've set the fadeOut effect to trigger when any anchor link is clicked (you could change it whatever you wish to act as the fade out trigger). When the page fades out, it will most likly fade to a 'White' screen. To avoid this, set your HTML background color to any HEX to match the sites color.
That script right there is probably the best solution and quickest to impliment on any site. It's been tested on IE7-8, FF 3+ and Opera 9-10 and works like a charm. Enjoy!
You could load the content using an AJAX request and then use javascript to fade out one page and fade in the other? In jQuery, something along the lines of:
$.get('newpage.html', {}, function(res){
$('#content-container').fadeOut().html(res).fadeIn();
});
Not perfect, but it's a move in the right direction hopefully? This isn't really something HTML was made for...
Thanks,
Joe
try this jQuery plugin. it's a tutorial on page transitions
What happens with pages that contain Flash/Video elements or other complex stuff? Will those fade properly?
Here's a hacky way I just thought of. Similar to Alex Lawford's answer, but hopefully a bit better:
On clicking a link, send an AJAX request for the new page, but don't do anything with the response. Once you receive the response, then fade out the current page, issue a standard window.location = <newurl> command and have javascript on that side immediately hide and then fade in the new document.
The hope here is that the response from the AJAX call is cached, so the time between fade out and fade in will be negligible.
I'll just reiterate from the first sentence though: this is hacky.