I have recently started playing around with joyride. It is superb. However, I am having some major responsive issues. When I resize my browser, the tip position changes. For instance, when the original position is 'top' it suddenly changes to 'bottom' when I resize the browser.
I have looked everywhere for a solution but unable to find why this is happening.
Is anyone experiencing this issue and/or know a way around this?
Thanks in advance!
Responsive web design is not about manually resizing your browser, the foundation needs to load to calculte the co-ords of the page?
Related
So I have successfully built this business website, integrated payment gateways and I have things working just as I need them to but there's a little albeit annoying problem, when scrolling down the webpage on a mobile device, the page suddenly scrolls back up. I thought this was a problem without my chrome browser so I used other browsers still the issue persists. I currently don't know how to fix this irksome issue. Here's a link to the webpage. Sorry to bother you with my problem.
I already fixed it, it was a problem from setting the HTML style behavior to smooth. Thank you all for your intended help!
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 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.
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