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!
Related
Our app loads extremely slowly, especially the pictures, and the developer has not been able to come up with a solution to this. The movements are slow and the buttons are slow in response (works on the 2nd or 3rd press).
The stability is terrible, for example the whole screen moves to the left by 2mm when you press a back button.
The app downloads information from the server every time it runs. We have tried changing the server, but this did not yield any results.
The current solution is to make the images smaller (compress them) to make the app run faster, but we are dubious if this will work.
Is there anybody who has had the same problems with their app?
I would be very grateful for any suggestions for how to fix this. We need it to be fast and responsive.
These are very vague, general issues. You ideally need a developer to take a look at the whole problem.
Some things they may look into would be:
Is data access asynchronous?
Are there transitions running on the
page?
Are styles being added on hover or focus?
If the app is written badly, simply chucking more resources at it probably won't solve the problem.
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
In my j2me blackberry application, I want to open editfield to enter text when user clicks on search icon. I have search icon added at the top right corner, when user clicks on it, I want to open basiceditfield with animating from right to left. I want Animation should be like default search on main screen in blackberry. How to do this? Is it possible?
You can do almost anything with the Blackberry Ui, if you understand it and are prepared to put the time in. But what you see when you press the magnifying glass is something that someone has spent a lot of time doing. There is API for doing anything like that (at least not one I have found). So if you are not experienced doing BlackBerry Ui, as I suspect is the case here, then I would suggest that replicating what the BB engineers have done with the animation from the search icon on the Home screen to the search screen, is too difficult to justify.
A lot of these sorts of things are, in my opinion, just gloss. They do not make the application any easier to use, just make it look flash. Personally, I would spend your time on making sure your application works well, rather than making it look flashy.
I do recommend using the screen transition animations as a way of moving from one screen to another. These are fairly easy to use and when used correctly, provide a good visual clue to your user regarding the flow through your application. I also suggest you spend some time making sure your assets (icons etc.) look good, on all the various sizes of BB that you are developing for.
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 been developing a media player browser plugin for the past few month using Firebreath, but I do not think this is a Firebreath problem.
Currently I am stuck on this weird problem that occurs when one tries to reload the webpage containing the plugin. The image that was being displayed before the reload will stay stuck on the top of screen. The new reloaded plugin will be alive and well behind it but the old image will stay stuck their on the screen forever. If I scroll or resize the browser or even change URLs the image will stay put, however If I move the browser the image will follow. The image stays after closing a tab, but leaves when closing the window
Here is a screenshot that demonstrates what I am talking about.
http://i.imgur.com/asB7i.jpg
( I am a new user so I cant post images )
Has you can see I left my plugin's page and went to the Firebreath website and the image still persists.
This problem happens on both windows and linux, much less frequently on linux, and happens when using both directx and opengl. But only happens on chrome.
Just wondering if you, or anybody else, has any thoughts, suggestions, or insights as to what might be happening. I've tried everything including atrocious hacks and nothing seems to work.
Thank you.
Your problem is most likely that you aren't tearing down your directx or opengl context when the DetachedEvent fires. AttachedEvent is the earliest you can set it up, and DetachedEvent is the latest you can leave it running.