I am developing a website: http://www.techniquetolife.com
It's basically a div 5x as big as the window inside window sized div, with other divs within the large div, using the overscroll and scrollTo plugins to navigate.
The website works perfectly fine in Safari and Firefox for OS/X. But I am having serious trouble making it work in Chrome. I'm not sure if it's an Chrome OS/X only problem, but whenever I scroll over one of the inner divs within the large div, the whole browser slows down, this only happens in Chrome...
If I disable overscroll and use the scrollbars it works 100% fine, but I really want to use the overscroll drag to scroll plugin.
I am no good at coding so any help would be greatly appreciated.
All of the plugins / browsers are on the latest version.
Okay, well I posted an answer to a similar question that I think this might be related too. I could be wrong though, but you could test it.
See the full question and my full answer here: Chrome slow scrolling with fixed position elements
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 Page -> Inspect Element -> Timeline -> Frames
► Hit Record on bottom
► Go back to the page and drag scrollbar up and down
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 no downside as of now. By adding
-webkit-transform: translateZ(0);
To your fixed panel, putting that div in its own compositing layer.
Related
I searched for this the solution a lot but I couldn't find any post describing the same "flickering" problem.
You can see a GIF here
Situation
I have a website with a menu, using app-route as in Polymer Starterkit but enhanced with neon-animated-pages.
If you use the menu (Start, My Card, My Dashboard) there is a smooth transition.
Problem
Go to "My Card" and click the enhance card arrow down (tooltip "more info") at the first card.
Now use the menus again and the page transitions are now flickering, as soon as the animation finished. It is like all object are quickly moving somewhere and then back to the position where they should be.
What I have tried
I tried to change CSS, as it seems to "re-align" the objects on the page.
Also I had this problem before when I used javascript to route to another page, but using "a href..." for app-route (as in polymer starterkit), this problem disappeared again.
Anyone have any idea what this can be?
I checked with Chrome, Firefox and IE, seems to be the same everywhere.
Thanks very much for your help!
Kind regards,
Huebiii
Found two more sources on github with the same issue and solutions.
Apparently only slide left/right animation are affected. Using a different animation should help.
Set Element.prototype.animate = null before loading the polyfill.
Flicker after slide animation in neon-animated-pages in Chrome
web-animations-next-lite flicker #86
I have included a draggable div on the website that I am building (visible here: gongle.fr), it is a kind of business card that is present on all pages.
However, when I drag it in either Chrome or Safari it causes the whole page to scroll down automatically, and regardless of the direction I am dragging in.
Strangely, on the the single project pages there is not this problem, so I guess it must be solvable in my mark up, but I have no idea how to do it.
Can anybody help?
I've just downloaded the latest Nivo slider 3.2 as I need it on a responsive site and out of the box with no modifications the transitions in ie7 and ie8 don't work.
They simply flick between images - no sliceDown or Fade they just rotate.
I've used it in the past with no problems - I've just view 2.6 in ie7 and ie8 and it's fine.
Does anyone know what can be done to fix it?
I've just checked out their demo too http://nivo.dev7studios.com/responsive-demo/ and the same issue is happening there.
Cheers
Just sharing what worked on my site -- I was using the default demo code, pretty much unedited from the download. It was beautiful and responsive (which I wanted) in all of the browsers I tested, except any version of i.e.. If i.e., it was just a rotation, no effects.
However, when I designated a size dimension for the wrapper div and the image divs, the transitions worked in i.e. also. (height: 350px;) You can specify the dimension in your css/stylesheet or inline -- if that's what it takes.
On my site, I only needed to specify a height dimension; for your site, you might need both height and width, or just width. A little experimentation was all it took.
But, with the height dimension specified, this threw off the display in the other browsers, so the dimension needs to be specified in terms of a "hack" for internet explorer: either a separate stylesheet just for internet explorer users or by using whatever your favorite internet explorer hacking method is: underscore, or \9, and so on. Here's a list of useful internet explorer workarounds, just for reference: internet explorer hacks
I know we hate to recommend hacking, but we all do it :). Would love to find out why this one worked for me, maybe there's a better way without the hack.
I'm building a web app to design and animate simple 3d scenes using the Away3D library, but the design of the interface itself is built around a scrolling menu which takes up the whole height of the screen.
The problem is, on OSX browsers have a silly quirk where if the page is scrolled when it has already gone as far as it can, the page can be dragged slightly further, revealing a brushed metal background. This looks nice and whatnot, but it pretty much ruins scrolling in a swf object. I use flash builder and export to safari, which is just about useable, if pretty annoying (especially with a mac touchpad, which can give a much higher scroll delta than a mousewheel can), but when I open my app in firefox/chrome the same effect happens, and causes the app and browser to slow down drastically.
I've found code which uses ExternalInterface to stop the swf sending mouse events to the page, but they all seem to disable detection in the swf as well, and I can't find anything else which help. If anyone knows of a solution you'll be saving me from throwing a few months' work away for what seems like a suspiciously unnecessary drawback to Flash on OSX!
Thanks in advance if anyone can help
Figured it out, in case anyone else gets stuck with this:
The feature's called elastic scrolling, if you're running a flash/flex app which takes up all the browser space you can simply set body{overflow: hidden;} in page CSS and it'll work just fine. Obviously, this disables any kind of page-scrolling - I believe you can turn it back on inside nested elements though.
Hope this helps someone anyway!
I've got a Wordpress site with some CSS3 rules applied to some images that rotate the images and have a hover effect on rollover too. Problems are showing up in Safari & Firefox when you hover on and then off these images and I can't seem to locate any similar issues by people on the Interwebs.
See http://tinyurl.com/3n2eude and hover on and then off the images (the slightly rotated ones):
Member name goes blurry and then back to normal (Firefox)
Member image border becomes jagged (Firefox)
A big black line displays to the side of the member images sometimes when you hover back and forth between two member images (Safari)
If I disable the transform:rotate rules, it's all fine. So seems to be an issue with that rule. Just can't work out how to get around it.
Anybody got some ideas on how I could get around these or what might be causing it?
Thanks for any ideas you might have!
Bit old of a question but that problem is related with rendering on browser (from what I understood). It cannot be fixed on CSS/HTML side. It must be fixed on user side.
Fix: http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/
More information about problem: CSS3 rotate - rendering problems in Firefox and Safari