Fixed attachment background image flicker/disappear in chrome when coupled with a css transform

by

This has been a very common unsolved mystery. Recently I had the same problem, and ‘-webkit-backface-visibility: hidden’, proved to be less than useless (on my ‘fixed’ attached background), since the background just disappeared when it was set. (Additional Info: the reason is that when the background is set as fixed, it is almost similar to putting a fixed ‘div’ in the background and setting the original div background to be transparent. Hidden backface does the obvious).

To solve the current problem, try setting the ‘position‘ propery of the element as ‘static‘, or if you have given it some other value, namely ‘relative‘, ‘fixed‘ or ‘absolute‘, just remove those.

If you don’t remember setting the position property, and the problem still persist, my suggestion is that you use a debugging tool on chrome or firefox, to

make sure there are no manually set values to the ‘position’ property other than
‘static’.

Just spent half an hour searching… Thought this could make it easier for you… regards. 🙂

More Related Contents:

  1. sendMessage from extension background or popup to content script doesn’t work
  2. background-attachment fixed with transform not working in Firefox
  3. How to change the activity background from fragment inside it [closed]
  4. Fixed position but relative to container
  5. How to double buffer .NET controls on a form?
  6. Is it possible to have two background colors for a single html element? [duplicate]
  7. Gradients in Internet Explorer 9
  8. How to set custom ActionBar color / style?
  9. draw diagonal lines in div background with CSS
  10. Android background image memory usage
  11. How do I change the background image using jQuery animation?
  12. How do I get a fixed position div to scroll horizontally with the content? Using jQuery
  13. Capturing mouse/keyboard events outside of form (app running in background)
  14. Change background color of android menu [duplicate]
  15. CSS Background image not loading
  16. How can I change the background color of a button WinAPI C++
  17. update label from background timer
  18. How to center a (background) image within a div?
  19. Fade background image in and out with jQuery?
  20. JFrame background image
  21. How to add a background image on top of a previous background image?
  22. how to remove background of images in python
  23. How to set NSString’s background cornerRadius on iOS7
  24. how to add background image to activity?
  25. Silent push notifications only delivered if device is charging and/or app is foreground
  26. How to set background image in Java?
  27. Android BroadcastReceiver onReceive Update TextView in MainActivity
  28. Android count down timer in background
  29. Styling EditText view with shape drawable to look similar to new holographic theme for Android < 3.0
  30. Chart.js Line, different fill color for negative point

Leave a Comment