On the page http://bit.ly/1t9P8jS, when we scoll down the page, the fixed menu background color glitch. This bug occurs only on Google Chrome.
I change the Z-index, changed the .on('scroll') to a function on requestAnimationFrame, nothing repair it.
You can scroll down where it has 10 logos and go over the menu, you will see it.
What can cause this? Why it's only on google chrome? I never saw a background-color glitching like this.
Thank you very much for your help!
Set your .loader to display:none; this fixed it for me. (Chrome 38 on Win)
For whatever reason, Chrome must be confused by the zindex and opacity combination when deciding what to repaint.
It should be pretty easy to hide/show your loader instead of just changing the opacity.
Related
i'm facing an issue which has been quite unknown to me.
In my example http://studio-a-h.de/kirby-test/projects/morning-has-not-dawned-yet you see a photoslider.
If you click on "Index" an overlay with the image index is about to be displayed.
In chrome and Firefox everything is fine, but Safari shows the overlay with a delay of appr. 500ms and it seems that there is an extra delay, even when the div is already visible.
Are there any known bugs with Safari and jquery? In my research i hardly found something, beside the iOS Mobile delay bug.
Would be great if someone has an idea. Maybe it is a css issue i did not find?
Best regards
Try and add a rule to adapt the browser in-advance, prior to that opacity change.
Use the will-change property like so:
.main {
will-change: opacity;
}
This will tell the browser that there is going to be some opacity changes to that div, so the browser can be ready for it before the opacity change rules are met.
Update:
It was not a jquery problem. I used hardware acceleration with translateZ(0) and this caused a super bad Safari performance on animations. Now i just have the problem that it lags like hell on scroll :(
I am developing, just for fun, a jQuery plugin that reveals elements from a "stack" as you scroll down the page.
Github repo is here - https://github.com/JayBizzle/Reveal
Demo is here - http://jaybizzle.github.io/Reveal/
Everything works great in Chrome, but when testing in Safari I am seeing some weird rendering issues.
If you view the demo in Safari and scroll down fairly quickly, you will notice white gaps appearing between the coloured DIVs.
Even stranger is, if you then inspect one of the out of position DIVs, the inspector highlights the DIV in the correct position. Also, if whilst your in the inspector, you change one of the elements CSS attributes, like adding a border, the page gets redrawn and the element appears in the correct position.
Anyone got any ideas if this is a Safari bug, or something i can overcome with some little known CSS?
I had a similar issue.
My workaround was giving position static first and then relative with a bit of delay.
$(elem).css('position', 'static');
setTimeout(function() {
$(elem).css('position', 'relative');
}, 1);
I'm working on a jQuery lightbox type plugin that needs to function for mobile devices and desktops. I'm having a problem with the full screen overlay effect. From my research, it seems that the standard solution for this is to use position: fixed or background-attachment: fixed to accomplish the overlay effect. Of course, mobile devices don't support fixed positioning, and so I'm trying to find another way.
Right now, I'm attaching a function to $( window ).on( 'resize' ) to get the new dimensions of the window and set the overlay to them. The problem I'm seeing is that this is triggering flickering scroll bars that make the whole thing really jumpy when I size the window down. You can see the effect here: (http://jsfiddle.net/dominic_p/ZqLCx/3/ or http://3strandsmarketing.com/lightbox.php).
Any idea how I can solve this? The code is still in heavy development so it's kind of a mess, but I tried to highlight what I think the 2 problem areas are in the jsFiddle with a comment that says "THE PROBLEM: START".
UPDATE:
I had a brilliant idea to just change the positioning to fixed for desktop browsers and still rely on my resizing scripts for mobile browsers. It seems to have helped a lot, but there is still some significant flicker when the browser window starts to get small (especially when shrinking it vertically). Also, when using position: fixed on Android 4 there is suddenly a large white gap on the side of the screen that I can horizontally scroll to in portrait mode only. Anyone have an idea of how to resolve either problem?
The solution for the flicker problem seems to be to set the overflow-x (or just overflow if you prefer) property for the <body> element to hidden. For curiosity's sake, it actually wasn't the overlay layer, but the lightbox contents that were causing the flicker.
I'm still struggling with the white gap that shows up on Android, but that's a separate problem, so I'm posting this as the solution.
In my web application I frequently have sections that need to be collapsed/expanded. I do this with jQuery using the slideDown() and slideUp() methods. They work great. However, in Firefox, if I am scrolled all the way to the bottom of the screen and I collapse a div the screen stutters and flashes as the div disappears and the page is automatically resized by the loss of the element.
Has anyone run into this problem before? I've been working around it by setting a min-height with a generous amount of space for any section that will be collapsible but this seems like an unnecessary solution. Chrome doesn't have this problem and, amazingly, neither does Internet Explorer, both of which smoothly resize the page without any sort of stutter or flashing.
I'm using Firefox 3.6 on Ubuntu and I've experienced this problem on earlier versions as well. I have not tested on Firefox 4.
I have ran into this problem before and yes. I have worked around this by setting a mini-height or consider not using a slide effect.
EDIT: Firefox 2 windows XP
Steps to reproduce problem:
Firefox 2 and visit: http://resopollution.com/rentfox/html/property_setup.html
Begin Typing and pressing [enter key] to create new lines
After about 10 [enter key] presses you'll notice the screen shaking
How this happened
This began happening after I installed a plugin for jQuery. It's located here:
http://resopollution.com/rentfox/html//js/textarea.js
It makes it so the textarea is expandable as I type, depending on how many lines there are in the text area, up to a max-height value which can be specified in CSS.
I tried disabling the 'setHeight' function within this plugin (the only thing that changes height dynamically) but I still saw the screen shaking.
When I think the problem might be
Firefox thinks that the screen just got larger, and compensates by putting in a scrollbar on the right side of the body document.
However, it realizes that in fact the page didn't get larger, and removes the scrollbar, causing the shaking.
I have no idea where in the code that makes Firefox think this way...
Appreciate any help.
You can either force a scrollbar: http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/
or hide the overflow of the div and try to get rid of the scrollbar, try overflow: hidden instead of auto in the div propertySetup
Can't reproduce, works fine here in Mac OSX + Firefox 3.5.
I can reproduce it (Debian Lenny, IceWeasel 3.0.6), but only with a very, very specific window size for FireFox (just slightly taller than 1024px, depending on your system font size, window manager and number of toolbars shown).
Just make your page slightly shorter or taller and the problem goes away. The problem only occurs when the addition of a new line after the 10th or so causes firefox to grown the page just enough to cause the scrollbar to appear. Just as you guessed.
That's a tiny 10px margin that is dependent on a lot of browser and system specific settings. In your page that margin is somewhere around the 1024px limit, depending on system font, toolbars, window decorations and the phase of the moon. Move that margin out of the 1024px region. Either make the page 40-50px shorter so that the scrollbar does not appear (even with large system fonts and an extra toolbar) or make it taller so the scrollbar is always there. Zoltan Lengyel's answer in this thread to always force the scrollbar can also be used.
I can reproduce it in Firefox 3.0.11 in Win XP.
Adding overflow:hidden to the body tag seemed to fix the problem, but doing that may wind up causing you more grief then disabling the plugin altogether. Giving the body tag overflow-x:scroll will stick a scrollbar there permanently but seems to solve it, too.
I reproduced it on Windows, FF3.
Interestingly it seems to happen within the jQuery .height() function!
Unfortunately you're using the minified version, so that's as far as I can get.