I have a div with an overflow on it to allow a calendar to scroll. But in FF 17 it seems to have a rendering issue that shows up if you scroll upwards. The top of the page just gets repeated inside (image attached). It corrects itself after a few seconds.
A few boards on the web have suggested switching this on in about:config (gfx.direct2d.force-enabled
layers.acceleration.force-enabled
webgl.force-enabled) which does fix the issue, but isn't really a viable option for customers using the web app.
This question here iframe won't scroll in Firefox 17 seems to be having issues with not scrolling at all, so close but not quite.
Has anyone else come up against this or have an idea on how to fix it?
This may be an issue with your video card and Firefox's hardware acceleration settings. I would go to Tools -> Options then under the Advanced panel, General tab, look for this region:
Try toggling those on or off and see if that helps.
Cheers!
Related
So I have a website with a menu-bar at the top with a sub menu that appears when you hover.
Under the menu, I have a large video playing embedded with the HTML5 <video> tag. However, on safari on ipad, i can not click the links that are hovering above the video, despite me having given them an appropriate z-index.
Can anyone help me out here? :(
edit: here's a jsfiddle: http://jsfiddle.net/7t6c00vn/
The issue seems only to happen on ipad.
The video takes precedence over any other material. Check Putting Video on Canvas on developer.apple.com.
So far as I can see the only solution seems to be to hide the video. Check
A Solution for Overlaid Elements on Video
I would also love to know if there is any other / better solution to this because I'm also in the process of building something using HTML5 and video that needs interaction.
It turns out that it's a sort-of-bug that was fixed with an update for the system. I don't think this problem has a definite answer yet, but I will choose FrankHe's answer as it actually provides some real suggestions and material for the problem.
But yea, things seem to work after the iOS update, so to any end users experiencing overlay problems with Video elements, update your systems! :)
Unfortunately, this also means I no longer have an un-updated device to test on.
Been using bootstrap for awhile and its now just had a small hickup.
Getting the same issue on their example. So for cleaner code ill use theirs...
http://newsapps.github.io/bootstrap/examples/navbar-fixed-top/
Win 8.1 pro
Using chrome 41.0.2272.101m (also just updated to this.. so noticed on previous version)
Disabled all extensions, also uninstalled and reinstalled, cleared cache.
Screen res: dual screen = 1920x1080 and 1680x1050
Problem: No nav bar content. Its rendered at over 7000px wide, and content is floated right or centered.
If I resize my window to say 700x400 the navbar gets a width of 2943px.
Also of note is that now the jumbotron on that page is now not display..
Its .container gets 1170px width? Reappears though when resizing.
Debugging chrome on my own site it appears that the viewport meta tag may be a cause. Removing that it performs fine, But also removing the position:fixed solves it. Though naturally leaves it with styling issues...
Using Dev tools and selecting a device works fine. No device, no menu....
Its like the viewport and media queries are not working correctly but ONLY on my PC?
I cant reproduce it on my home PC or work colleges. I cant find any info on it and for a responsive site the view-port is needed.
Driving me nuts.... quick fix, use FF but if clients get this issue or others have it?
Cant add screenshot as < 10 rep (sorry..)
For anyone interested.
After clearing the cache, uninstalling, resetting all settings and nothing working I decided to play around again in the 'device mode' pane again, as I figured this is the most likely place it'll be due to the view port meta tag seeming to affect it.
I use this pane to test sizes and resolutions and then turn it off. BUT there must be some sort of setting in that that stuck. Un-ticking everything and changing devices doesnt work..(and resetting didnt either) but you will notice a circle icon with a cross in it in the top left. Like the 'ban' symbol and hovering over it will say 'reset all overrides'. Click it..
No idea HOW an override gone in there, or why resetting the browser, uninstalling etc would not reset them.. or where you can find them, but there you go. Problem solved.
#Logan I was having the same issue. Resetting the override doesn't work for me but switching Chrome to a new user does, bizarrely.
I'm facing a problem I can't figure out how to solve. I'm almost sure this is a Chrome bug since in other browsers it works like a charm but I want to be sure. On my website, developed using a mobile first and responsive design approach, I have a menu that uses the Left Nav Flyout pattern. On Tablets and desktops, I show it full width.
When I load the website on my smartphone (specifically an Android device) using Chrome in Portrait mode, once I rotate the device (passing in Landscape mode) and start to scroll the page, as soon as I reach the menu position, the latter magically disappears. What is really strange is that if you try to click the space that now is completely white, you can see that the links are actually there. I tried to use the inspector to find the problem but didn't succeed.
So, wow can I solve the problem? Anyone else had this issue before? If you know it's a bug, I'm glad to add a temporary workaround as well.
I didn't find a real solution but a reasonable workaround. Of course, I still hope that someone will explain what's the cause of this issue and how to solve it.
In the meantime, I found that the problem occurs because the menu, 240px wide, is completely out of the viewport. In fact, as soon as I changed the margin-left to 239.5px the menu didn't disappear anymore.
The left and right buttons for the slider and the small buttons below the slider doesn't work when clicked. only works in IE but not on Firefox and chrome.
Also the images gets out of place when I re-size the browser window to a mobile phone size or tablet size browser.
this is the website http://amakris.com
Thank you
I have been driving myself crazy trying to find an answer to this very problem and I think I just have. It would appear that for the last almost 8 months that Flexslider 2.0 has had a known problem with touch devices. Personally I have an AIO touchscreen and just proved what I found. If you have a touch enabled device and visit any website using flexslider, including Woo's demo - you will notice that by using the "touch" device the slider buttons and navigation work perfectly, but not if you use the mouse.
Apparently there is a touch enabled feature in Chrome which may or may not be able to be turned off or programmed off with a little bit of code. See here: https://github.com/woothemes/FlexSlider/issues/351
It would appear that since flexslider is touch enabled, Chrome and AIO desktops or other touch devices signal to Flexslider to turn off the manual navigation because it is not needed.
I for one am happy that I can stop driving myself crazy now. Enough time has been wasted thinking about this.
I hope anyone else that finds this can rest easy to.
Why do elements with the CSS position: fixed applied to them cause Firefox to eat 100% CPU when scrolling the page they are in? And are there any workarounds?
I've noticed this behavior on a few sites, for example the notification bar at the top of the page on StackOverflow. I'm using Linux in case that matters.
This is bug #201307.
It's a bug reported in bugzilla
Apparently a work-around (with mixed reports of success..) is to disable smooth-scrolling
Just disable smooth scrolling in Edit > Preferences > Advanced.
As already stated, this is bug #201307. The workaround is to disable smooth scrolling:
Edit -> Prefrences -> Advanced -> General tab -> uncheck "Use smooth scrolling"
This website has a fixed element "First time at Stack Overflow? Check out the FAQ!", and it's slow as hell in firefox. Works better with Opera and Chrome though.
FF3, Windows XP, ATI.
it eats CPU because the browser has to repaint the entire viewport every scroll change rather than just the newly visible area
Are you sure that there's a direct link here? Have you created a static HTML page with fixed elements to verify your theory? Given how widely these CSS properties are used, I'd think someone else would have noticed it by now, whatever browser/OS you're running.