I'm using Nivo slider and Fancy box together and I'm getting this problem that I cannot seem to correct.
I've created a JSFiddle to try and replicate the problem I'm having.
.nivoSlider {
position:relative;
width:100%;
height:auto 265px;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
display: none;
}
If you look very closely, you can see that the image are slightly shrinking and expanding, that the problem I'm having but you can see it, but its on a larger scale.
I have my suspicions that its something to do with the positioning in the CSS after looking here on SO but I've commented out the positioning tag in a few places and nothing has made a difference. Apparently IE9 doesn't count the auto CSS tag for height or width, this may be a problem, I have removed every auto tag, but that still hasn't made a difference.
Like I say it works fine across every browser including IE10 and IE11.
Also my version of jQuery is 2.1.1 could this be a problem
Related
Here are the screenshots of my mobile browser and my desktop browser.
My webpage has some overflow in x axis which I hid using overflow-x: hidden;
Is there any way I can make my webpage render in mobile browser, the way it renders in desktop browser i.e. full width and overflow hidden.
CSS:
body{
padding:0;
margin:0;
background-image:url(../images/PaperBG/goovepaper.png);
overflow-x: hidden;
}
Thanks.
Try adding this:
#main_body {
overflow-x: hidden;
}
you are having an issue with the markup, check for overflowing contents,you can use the mozilla dev tool to get a 3D view of the page and fix the overflowing contents towards x axis. If it still doesn't help, please provide a sample markup on jsfiddle, codepoen or somewhere, we can have a look.
Weird problem in IE11, the fixed background of the following project flickers when using mousewheel or cursor keys only. This is a bug, for sure.
website: http://gerbrandy.zitemedia.nl:88/
I use a script to resize the background proportional but this is not the problem because the resize event does not fire when scrolling, so it is not a problem of the script. It has something to do with a fixed positioned element. This script works okay for several years in all other browsers.
I have no idea how to fix this. Tried several things, but don't know how to disable javascript for example but should not be the case. I'm using IE11 on Windows 8.1.
Does somebody has some same experience with this and do you know how to work around this problem?
Three things can cause IE 11 flickering/choppy/delay for fixed position element while scrolling:
If you have an "overflow: auto;" on the parent container element, remove it.
Remove background-attachment:fixed; from the fixed position element.
Remove border-radius from the fixed position element (mobile IE only).
I was having the same issue, it seems to be a bug that occurs when there is too much going on inside the page for your computer specs to handle, I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);) that forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.
Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).
Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.
#element {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 9994;
...other stuff and then
/* MAGIC HAPPENS HERE */
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
We can remove grey flicker on IE9, IE10, IE11, MEdge<=20 by setting overflow of html and body like
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
Apparently the "bug" only affects IE11 on Windows 8.1, or maybe 8.0 too. Removing background-attachmend:fixed worked for me. Apparently that rule was redundant, since the background image displays correctly in every browser without that rule. A second solution is to disable Smooth Scrolling in the IE settings, but that's not optimal since it's enabled in a default installation.
Flickering CSS:
#element_id{
position:fixed;
height:100%;
left:0;
bottom:0;
right:0;
background-image:url('path/to/jpg');
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
}
...and new code (1 line removed):
#element_id{
position:fixed;
height:100%;
left:0;
bottom:0;
right:0;
background-image:url('path/to/jpg');
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}
A hardware acceleration technique as follow caused mine.
outline: 1px solid transparent;
Remove it and it might be the cause.
Another reason for flickering can obviously be another fixed element inside the fixed element. At least that was the reason in my case. The false behaviour of Edge appears to be random.
This behaviour is due to a bug with Microsofts "Smooth Scroll" feature. Happens in IE10 and 11 on Win7 and up. I wouldn't recommend to alter your perfectly working code to fix yet another MS bug. Instead disable their "feature" by opening Internet Explorers Settings, go to Advanced and in the category "Browsing" it's the last option which you need to disable "Use smooth scrolling".
My Website's body was set to position: relative.
Removing that did the trick for my IE-exclusive flickering/jumping problem.
I've built a demo site using Skrollr's fixed position parallax code:
http://dev-jfw-sample-parallax-2.gotpantheon.com/
And though scrolling works great on my iPhone, the vertical scrollbar has disappeared -- and I'd like how the scrollbar there to indicate there's additional content.
Now when I look at the Skrollr demo page -- which also uses fixed positioning -- on an iPhone I see a scrollbar:
http://prinzhorn.github.io/skrollr/
I'm doing this in Drupal so the content is now nested in multiple divs, is that's what's eliminating the scrollbars?
I got an answer from the developer:
There are no scrollbars added by skrollr. Add one yourself, you can easily animate the scrollbar using skrollr.
Take http://prinzhorn.github.io/skrollr/ as an example
<div id="scrollbar" data-0="top:0%;margin-top:2px;" data-end="top:100%;margin-top:-52px;"></div>
#scrollbar {position:fixed; right:2px; height:50px; width:6px; background:#444; background:rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.6); z-index:300; border-radius:3px;}
.skrollr-desktop #scrollbar {display:none;}
It seems I am having a strange issue in Chrome, with "width: 0px".
I am setting the width to 0, in order to partially hide a link. On mouseover I am displaying the link, with a simple animation.
While Firefox and Opera behave nicely, in Chrome I see the link's text displayed, even though the width is set to 0. (in IE and Safari I cannot test right now)
For your convenience, I added the code in a fiddle, here: http://jsfiddle.net/mihaidoru/yNzSH/
QUESTION: How can I make Chrome display the same thing as Firefox, CSS only, if possible.
NOTE: the menu should respect the CSS: "position: fixed; right: 0px".
Any help will be greatly appreciated.
Thank you.
Set the links to be overflow: hidden.
I have set the width to 1px instead of 0px. It makes it so that the green background appears and when you hover over it it expands as expected. I also changed it to 1px in your jQuery.
updated fiddle
You can use the css overflow property
overflow: hidden;
overflow: hidden does not work for me, try display:none; javascript reads ok.
In a mobile web application I have a div which can be scrolled with the new fancy -webkit-overflow-scrolling: touch. The only problem is that the content is being rendered only when the scrolling finishes. Is there a way to make Mobile Safari (and maybe other mobile browsers, like that one in Android) render the html during single finger scroll?
.layer-content {
position: absolute;
top: 112px;
bottom: 0;
width: 100%;
background: #e6e6e6;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
You can work around this by using hardware acceleration. Try adding the following CSS to elements inside .layer-content:
-webkit-transform: translate3d(0,0,0);
Not really. That is just the way the iPhone works. If you scroll, all resources are used to make the scrolling very smooth, at the expense of not showing the new parts. You could maybe fool the browser into thinking the layer is bigger, by making it bigger, and add a layer on top of the part you don't want to show, but this doesn't work for all layouts. I would just leave it be. Users are used to it, as normal pages have the same 'rendering issue'.
The position: absolute is messing with the rendering. The Mobile Safari will not render elements that does not have the standard value for positioning, until the scrolling have come to a halt.
If the position is auto (the default value), Mobile Safari will render the element as you scroll.
I'm pretty darn sure I just solved this with:
overflow-y: auto;
Add that to your scrolling element.
(Presumably just overflow: auto; would work too depending on your needs.)