I have a web page with sticky header with simple transition - when the page is scrolled down the header shrinks its size. The logo is an anchor tag with background-image. The problem is when you scroll down and the header shrinks, you see the logo image flicker before it shrinks too. This happens only in Internet Explorer (latest) and MS Edge (latest). Here is the link to the page: http://flatrockoutsourcing.com/
How to prevent background-image flickering in Internet Explorer/Edge?
1.1k Views Asked by Martin At
1
There are 1 best solutions below
Related Questions in INTERNET-EXPLORER
- How do I wrap text in a pre tag for Internet explorer?
- How do I extract info from crunchbase
- Jquery on submit ajax post needs two clicks in IE
- SSL certificate error 403.13 in IIS 7.5
- Hiding Script Errors popups in IE8
- Internet explorer 11 browser cannot display the expires value of the session cookie from my app
- Internet Explorer hover/rgba/opacity/css3 compatibility
- How to wait for a java applet to load when automating Internet Explorer?
- Javascript Event.originalEvent.path IE8 error
- cursor: copy not working in Internet Expoler
- input[type="submit"][disabled] not working for IE8
- Auothotkey: Remove string, placement string in subject box
- Why does IE show junk for my dasBlog blog?
- Lag in scrolling behavior on IE 10 and IE Edge modes
- Using angularJS click on enter form functionality in Internet Explorer
Related Questions in BACKGROUND-IMAGE
- Background-image rendering causes blurring of HD background
- Fixed background adjusted to the monitor size
- css3: remove background image (background-image:none; not working)
- Background image sometimes not showing
- How can i add an image as background in Chartjs?
- Timer Background transition
- Semantic Background Image
- Positioning a background image in an element with an offset from the bottom
- Background picture won't stretch below fixed footer
- Visual Studio hangs up on adding images in local root folder Resources?
- Misalignment between centered Background image and centered DIV depending on browser width
- How resolve issue with background-image linear-gradient?
- backkground image is only displaying after do loggin in Spring Server
- align transparent div over carousel background image in bootstrap
- Multiple screen support Windows Phone 8
Related Questions in CSS-TRANSITIONS
- CSS: Preventing a property to affect on element until the end of transition
- Perfecting perspective - css folding effect
- ng-repeat + ng-animate + css3 transition
- CSS rotate animation doesn't start properly in Safari
- What's the best way to add a delay and transition of overlay DIV being shown?
- CSS3 Animations being triggered on display change
- CSS transition not triggered on window resize
- Z-index issue using transform scale
- How to prevent div:hover transitions from being disabled by javascript div style attributes alterations
- CSS background-color transition not working in specific browsers (desktop + mobile)
- Animation transitions behave differently for ng-hide-remove and ng-hide-add
- Fade in div one after another with delay
- Smooth mouse-out animation
- CSS color transition triggers multiple animations when loading the website
- Animating a flexbox from "auto"
Related Questions in MICROSOFT-EDGE
- Microsoft Edge browser javascript runtime "permission denied" error
- XPath expression using "and" doesn't work in Microsoft Edge?
- How to change homepage by Registry in Edge Browser
- Will Microsoft Edge use prefixes like -webkit- or -ms-?
- Why does Microsoft Edge (formerly Project Spartan) prompt to open this website in Internet Explorer?
- Modal windows aren't responding in Microsoft Edge (Spartan)
- XMLHttpRequest: Network Error 0x80070005, Access is denied on Microsoft Edge (but not IE)
- Microsoft Edge PDF inline issue
- Where does Edge store user's virtualized files?
- ::ms-thumb pseudo element behaviour after dragging
- Will Microsoft Edge and Windows 10 support HTA?
- Communicating between a native app and MS Edge or IE in Enhanced Protected Mode?
- SVG rendering in Microsoft Edge
- Datatables.net excel export size is huge and can't download in IE 11/Edge but can in Chrome
- Delphi: get URL from Edge ver 38+ (all windows 10 updates installed)
Related Questions in FLICKER
- Tesselation result flickering - OpenGL/GLSL
- Screen flickers when setting background
- Avoid TextBox flickering while appending text
- Python + Blessed: how to avoid the flickering when clearing the screen very frequently
- RichTextBox flickering when SpellCheck Activated and ScrollBar visible
- glScissors produces me flickering with animations (JOGL)
- Repaint method flickering
- My application slightly flickers on resize despite applying known techniques for anti-flickering
- Some Images flicker in IE8
- Libgdx - Bullet Physics 3rd Person Camera , Object becoming smaller or moving away from camera over the time
- Static controls slightly flicker when main window is resized
- How to solve Ruler Control flickering
- Why does my image flicker in java jframe?
- scrolltofixed limit issue and flickering
- Draw function causes flicker - Javascript
Trending Questions
- UIImageView Frame Doesn't Reflect Constraints
- Is it possible to use adb commands to click on a view by finding its ID?
- How to create a new web character symbol recognizable by html/javascript?
- Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
- Heap Gives Page Fault
- Connect ffmpeg to Visual Studio 2008
- Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
- How to avoid default initialization of objects in std::vector?
- second argument of the command line arguments in a format other than char** argv or char* argv[]
- How to improve efficiency of algorithm which generates next lexicographic permutation?
- Navigating to the another actvity app getting crash in android
- How to read the particular message format in android and store in sqlite database?
- Resetting inventory status after order is cancelled
- Efficiently compute powers of X in SSE/AVX
- Insert into an external database using ajax and php : POST 500 (Internal Server Error)
Popular Questions
- How do I undo the most recent local commits in Git?
- How can I remove a specific item from an array in JavaScript?
- How do I delete a Git branch locally and remotely?
- Find all files containing a specific text (string) on Linux?
- How do I revert a Git repository to a previous commit?
- How do I create an HTML button that acts like a link?
- How do I check out a remote Git branch?
- How do I force "git pull" to overwrite local files?
- How do I list all files of a directory?
- How to check whether a string contains a substring in JavaScript?
- How do I redirect to another webpage?
- How can I iterate over rows in a Pandas DataFrame?
- How do I convert a String to an int in Java?
- Does Python have a string 'contains' substring method?
- How do I check if a string contains a specific word?
I've found the reason - when the page is scrolled down and header gets the extra class - i was changing the logo dimensions (width & height) and the transition from original to fixed header dimensions caused the flickering of the logo. So instead of doing that I keep the dimensions and resize it only for certain lower resolutions. It's not the same though, the logo now stay with same width & height for fixed header and when you are at the top of the page
Found the solution - the behavior could be achieved by using
transform: scale();property