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?
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
This is really weird behavior. Having difficulty even quantifying. Have had to revise a few times.
Best I can do is the following:
The tech stack for my app is Backbone Marionette, handlebars.js, require.js.
The app contains images mostly of icon size - say 32x32 and under. Some jpg, some png, some svg.
Some of the images, the same ones each time, don't display. That's a common issue on which many have posted. No big news there.
But if I hit the sleep button, leave the iPad sit for a minute or two until the unit really goes into hibernate mode, and then revive it, the images slowly and magically fade in. They don't abruptly display when the screen lights. They fade in afterward.
Doesn't work to just hit the sleep button and instantly revive. Have to wait a minute until it truly hibernates.
After true hibernation, no matter how many times I refresh the page, the images are there. But, if I go and clear the cache on Safari and load the page, the images are not there again - until I do that hibernate thing.
All of these images do display without fail in a browser on a PC (all flavors). It's just on the iPad that they don't.
I thought, at first, it was just images I was loading in collection views. It is not. I have a third party HTML5 video player in the app. It has a play button and other controls in svg format. This also exhibits the behavior above.
Once the iPad has hibernated and been revived, the images fade in. Only clearing cache makes them disappear again.
There are no 404 errors when the images don't display (checked in dev console on a MAC). In fact, if I just tap the screen where the video play button is supposed to display, the player begins. So the button seems to actually be there, just not painted on the screen - until you do that hibernate thing.
Some images in the app always load no matter what. I'm looking at those images to see if I can note anything special about them or the code which renders them.
I tend to think it's not the images themselves because the very same images in a plain web page always display on the iPad. Also, that third party video player in a plain web page displays the svg play button and controls without fail on the iPad.
It's just in my app that the behavior occurs. So it's logical to think my app is where the problem lies. I just can't seem to find a common thread for the images that always work vs ones that don't.
Not sure what code I can even post here. I'll look and see what might make sense to post.
Definitely a problem loading images dynamically via the framework. They are there but do not paint. No idea what the problem actually is. Literally only happens on Safari mobile browser. Can't make it happen anywhere else, even old IE. Know one solution that definitely works though. Preload all the images by explicitly including them in a div in your markup. When you load your marionette app, remove the div - $("#preload-images").remove(). Thereafter the images never fail to paint when added dynamically via marionette.
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.
I have manually implemented the Flattr button to my site.
In Firefox (Windows) the "popout" covers the button so one can't press it.
Any other browser renders the popout in the correct place. Can someone confirm this? Or is it a conflict on my site?
Since you don't mention which site is yours I'm left to speculate on the reasons for this and if I do then I think it is that your body-element doesn't start at the top left of your browser and that therefor positioning of the popout fails due to browsers inability to correctly account for offset body elements.
We've had reports of people experiencing this problem in eg. WordPress where the admin-bar that's showed when a user is logged in pushes the entire site down 20 pixels or something and makes the position of the popout be of by 20 pixels. Could it be something similar for you - that you're logged in in Firefox and not in other browsers?
As far as I know there's no workaround for this limitation - eg. jQuery can't account for it either.
Good thing though: If your layout has a body with an offset or something else that makes the popout not work for you you can disable it by setting popout 0 in the settings of the button.
Opera is the only browser I've tested that doesn't recognize the links on my home page. I can click on a few of the images and go to the linked page, but most don't do anything when I click. The cursor even remains an arrow. Works in every other browser.
http://test.davewhitley.com/not-wp/mobile_test/
They are images wrapped in anchor tags and the grid is created with css columns.
Any ideas?
Update:
The same links that are not clickable also aren't inspect-able in opera's web inspector.
Update:
Please note that some of the images are click-able on the left hand side. Which images are click-able varies with the browser width. If you view the website > 1300px browser width then most of the images are not click-able on the right side.
This seems to be a known bug in Opera 11.6x which is fixed in the most recent previews of Opera 12. I don't know of any workaround right now, but given that a fix is coming in the not too distant future I would simply wait for it.