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);
Related
So I have this very simple Bootstrap landing page, and everything works great in Chrome/Safari etc, however I found out today that you cannot click on some links when you use Microsoft's Edge Browser.
The page is live at Slice Virtual Golf
On closer inspection, it would seem to be only the links which are inside Bootstrap col- parents which have trouble being clicked, and interestingly, if you change the browser window size, or open the developer tools then the links magically start being accessible.
I have had a good search, found a couple of issues similar, left a comment for a Microsoft support engineer who had suggested to fix the problem that a clean boot was required, however that seems a little excessive to me for something which looks like a bug.
If anyone knows of this issue or can take a quick look at the code then please let me know what you come up with because it's just too weird of a thing not to try and resolve.
This appears to be a bug in Internet Explorer, and Microsoft Edge. I was able to determine the cause to be the temporary application of overflow: hidden to the body, and the floated/positioned layout of the anchors below the fold. It appears as though IE/Edge determine these to be unreachable links (initially) as a result of the overflow: hidden styling.
I have reduced your page to the following:
<!doctype html>
<html style="overflow-y: scroll; height: 100%;">
<head></head>
<body style="margin: 0; height: 100%">
<a style="float: left; position: relative; margin-top: 1000px" href="#">Link</a>
<script type="text/javascript">
document.body.style.overflow = "hidden";
setTimeout(function () {
document.body.style.overflow = "visible";
}, 2000 );
</script>
</body>
</html>
This combination results in non-functioning below the fold anchors.
A bug has been filed for the Microsoft Edge team to evaluate this issue.
Track this bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7843412/
I have following code in header.php file on a WP theme :
<style type="text/css">
#Subheader{display:none;}
</style>
This code hides a div with id="Subheader" which works fine in Chrome and Firefox, but not in IE 8. When I look at source code in IE, the code is there, but its not hiding the div.
Also I have similar code :
<style type="text/css">
#Footer, .lwa-submit-links {display:none;}
</style>
in a page from wp-admin page editor, which should hide the footer div when that page is opened. Again its not working in IE.
Any Help would be appreciated.
This sounds exceedingly like a long standing bug in IE, whereby trying to hide an element using display:none didn't work if it's parent container was already display none. When the parent was re-shown, the child also became visible even though it was still display:none.
The problem is described and demoed in an interesting site: Position is Everything, about browser bugs. The full link for this problem is http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm.
However it was apparently a thing which affects IE in Compatibility mode (set from Tools/Compatibility settings); I don't know if you happen to be running in that mode? Even if not it might be well worth while playing around with the sequence you set things to display none to see if that will fix your problem.
Link to website:
http://www.ideagang.co/home.php
Is it possible to set the background to black when click from 1 page to another?
Right now the website load perfectly with the black background, it's just that when I navigate from one page to another the page flickr for a second.....
Is there anyway to resolve this by setting the background to black when loading page internally?
Not using only CSS. The browser's default color for the background is white, so the flicker you see is the default coming through for a split second before it has a chance to read the CSS rule to make it black.
The only way I can think of to get around this would be to load the first page, and then switch from page to page via javascript, loading them in to the exiting page. No reloads means no flicker. In my opinion, that is a ton of overhead for very little value, so I would suggest just living with it.
I very much doubt this would be possible with CSS.
Have you tried using
<body background="#000">
It is long deprecated but may help. I think you will still get a white flash but it may be for less time.
You could also try putting a small block of CSS as the first thing in the header after your title.
the html5 method of doing this via CSS is now:
<body style="background-color:#000">
also tried putting this CSS styling as the first thing in the <head> :
<style type="text/css">
body{background-color:#000}
</style>
...but on my application it still resulted in a momentary white flash
While this is a pretty old question, hopefully this can help someone else who stumbles along (like me):
Using some javascript seems to have worked for me (only tested on Firefox 84.0 - Ubuntu):
index.html:
<script src='script.js'></script>
script.js:
onload = function() {
document.body.style.backgroundColor = 'black';
}
I believe the most efficient way to accomplish this is to place the background color in the html tag itself in the main document file. Such that
<html lang="en" style="background-color: #111">
With this you can set any background color you want and it should work.
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.
Hopefully I can explain this well and hopefully I'm thinking the right way :)
My question is, If I have a print style sheet that has a couple of classes that "displays" a background image, is there a way to make the browser download the images at the point of printing or do you have to preload the images.
I have mixed results doing a print styled background image with FF and IE. IE actually seems to download the image at print? where as FF doesn't - (even though Firefox's Live HTTP headers addon says it does!).
My code is basically saying this:
#media=screen
.class
{
display: none;
}
#media=print
.class
{
display: list-item !important;
list-style-image:
}
Not a great solution, but you could provide a "Print" button which modifies the style when it's clicked prior to actually printing and changes it back afterwards?
For example (using jQuery):
<script type="text/javascript" language="javascript">
function doprint() {
$('.class').css('display','list-item').css('list-style-image','img.jpg');
window.print();
$('.class').css('display','none').css('list-style-image','');
}
</script>
<input type="button" onclick="doprint();" />
Obviously you can get around this by using the browser's Print function.
There's also the issue of the overhead you've saved by not preloading the image being well and truly used up by using jquery and script...