I've noticed a white flicker that appears when ever I navigate between any html files in my project except for when I navigate away from my index file. I'm using JQM but I'm not using ajax because I'm linking to multipage documents.
I've read this happening to people who use JQM along with Phonegap when making apps but for a regular desktop site, I am confused as to why this is happening. Any idea?
Try this..
Remove data-position="fixed" on headers and footers if you are using it.
Then, apply the following CSS styles to your header, content and footer:
.header {
position : fixed;
z-index : 10;
top : 0;
width : 100%
}
.content {
padding : 45px 15px
}
.footer {
position : fixed;
z-index : 10;
bottom : 0;
width : 100%
}
This idea/snippet is borrowed from what Jasper's answer (not the OP's accepted answer) in this question. I was experiencing that flicker problem on a single-page jQuery Mobile v1.1.0 + Phonegap application and this solved it for me. Perhaps this same workaround will work for your multi-page application on v1.3.
Related
I've experienced very strange behavior with the website size.
On mobile, the website appears bigger than its content (and its html & body elements)
There is no overflow happening (or at least I found none)
When I hover with my mouse over the React Developer Tools extension, it corrects itself and the website has now the correct size (which is the size of the screen)
Links:
A link to a screen recording
A link to the GitHub repository - feel free to fork it
I've deployed the site to GitHub Pages - the bug didn't get away.
A link to the GitHub Pages site
The bug will only appear when:
You don't resize the page to mobile size. You have to load it in mobile size.
You use a real mobile device or the mobile device emulator of the browser. It won't appear without that.
Note that everything will get pretty big and oversized after resizing and refreshing the page two to three times with the "responsive" device option in the mobile device emulator. But the oversizing doesn't change the size of the elements, they are still sized to fit perfectly in the window. It's just somehow scaled up.
Everything will then turn normal again after the mobile device emulator gets closed.
Maybe this scale issue is a completely different problem. (it doesn't get corrected by hovering over the React Devtools)
Maybe you will suspect these background circle shadows, but I've tried commenting them out - nothing changed.
This bug appears on Chrome (Chrome for Windows: version 92.0.4515.159 / Mobile: same version) and MS Edge (version 92.0.902.78). I haven't tested other browsers.
Apart from React, I am using Tailwind CSS, react-router, and framer-motion.
This problem was caused by Framer-Motion.
The Home component is animated with these variants:
const homeVariants = {
initial: {
x: "110vw",
opacity: 0.5,
},
animate: {
x: 0,
opacity: 1,
transition: {
duration: 1,
ease: "easeOut",
},
},
exit: {
x: "-110vw",
opacity: 0.5,
transition: {
duration: 1,
ease: "easeIn",
},
},
};
So when it initially slides in from the right, it is causing the website to expand.
I've added overflow-x: hidden; to the body, but that is not enough, as explained here.
To fix this, I added overflow-x: hidden; to both html and body and position: relative; on the body tag.
html,
body {
background: #130f40;
overflow-x: hidden;
scroll-behavior: smooth;
}
body {
position: relative;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
Try This
You can visit this link for more description
I'm working on updating my research lab website, and I'm using a Jekyll framework with Bootstrap. Whenever I navigate to a new page or refresh my current page, the font size grows slightly, then returns to its normal size. This makes for a jerky experience. My work in progress is currently on rigglemanlab.github.io, and the page where this issue is most noticeable is rigglemanlab.github.io/members. The code for this site is on github.com/benlindsay/lab_site.
I've tried some answers to similar posts like this one where the suggestion was to add the following to my css sheet:
body > div {
font-size: 1.4rem
}
I tried variations of that like em instead of rem and html instead of body > div and setting the #font-size-base variable to 1.4em or 1.4rem, but the same behavior persisted with each attempt. How can I clean up the rendering of my website?
As Mr Lister points out, it's probably a case of FOUT (flash of unstyled text), as it looks like you're using TypeKit.
A quick solution to this is to use TypeKit's built in events to hide text until the webfonts has loaded.
.wf-loading { visibility: hidden; } /* font is loading and hidden */
.wf-active, .wf-inactive { visibility: visible; } /* font has loaded and is visible */
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.
Im working on a print style in chrome, an everything seemed fine, until i noticed that i didnt get any Footer or header on the print (the std. with page title, url etc., and i HAVE turned it ON in the print preview dialog).
So i just thought i would make one, so i just added a with:
.print-logo {
position: fixed;
display: block;
bottom: 0px;
right: 0px;
text-align: right;
width: 100%;
}
But that doesnt place itself all the way to the right:
So i tried printing in IE10, and here both the default footer, and my custom shows up, and is placed correct.
Everything is setup with bootstrap, and print friendly version is made by using the .hidden-print class.
Its all in localhost ATM, but i have a saved html version of 1 page here:
Anyone who have experience with these problems?
UPDATE:
Found that if i add
#page {
size: A4 portrait;
}
that i will add my default footer and headers... but my custom one is still displaying wrong...
I got my best result printing in Chrome setting a fixed width (in px) to the page or main div. If not, Chrome try to fix the content changing font-sizes, etc.
I have just been implementing a google map, that pulls data from the yelp API. All fine, apart from I've noticed that the scroll bars on the page have dissappeared. Problem exists in FF and IE on Mac and PC.
Take a look - http://bhx-birmingham-airport.co.uk/pages/hotels.php
What do I need to do to get them back?
Apparently in your hotels.php page there is a css rule:
body {
margin:0;
overflow:hidden; /* <-- this is causing the problem! */
}
Change it and remove the overflow:hidden or if you can't do that (for example if google's code injects that style in there) then add another rule in your css file:
body {
overflow:auto !important;
}