Why does stacking order change on webkit filter hover?

by

This is because a value other than none establishes a stacking context. This is documented in the spec (which is currently in Working Draft status):

2 Module interactions

This specification defines a set of CSS properties that affect the
visual rendering of elements to which those properties are applied;
these effects are applied after elements have been sized and
positioned according to the Visual formatting model from [CSS21]. Some
values of these properties result in the creation of a containing
block, and/or the creation of a stacking context.

Also the spec states:

5 Graphic filters: the filter property

A computed value of other than none results in the creation of a
stacking context [CSS21] the same way that CSS opacity does.

More Related Contents:

  1. Custom CSS Scrollbar for Firefox
  2. How can I force WebKit to redraw/repaint to propagate style changes?
  3. Understanding z-index stacking order
  4. Is it possible to set the stacking order of pseudo-elements below their parent element? [duplicate]
  5. css3 transition animation on load?
  6. css z-index lost after webkit transform translate3d
  7. What is WebKit and how is it related to CSS?
  8. Which CSS properties create a stacking context?
  9. How to get a parent element to appear above child [duplicate]
  10. What are -moz- and -webkit-? [duplicate]
  11. Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink
  12. How to make child element higher z-index than parent? [duplicate]
  13. IE7 Z-Index issue – Context Menu
  14. Fixed element disappears in Chrome
  15. Z-Index Relative or Absolute?
  16. How to prevent Webkit text rendering change during CSS transition
  17. Internet Explorer z-index bug?
  18. Webkit CSS to control the box around the color in an input[type=color]?
  19. z-index does not work in Internet Explorer with pdf in iframe
  20. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  21. Z-index with before pseudo-element
  22. ‘Inverted’ border-radius possible? [duplicate]
  23. Stacking order of elements affected by opacity
  24. Float a div above page content
  25. CSS3 property webkit-overflow-scrolling:touch ERROR
  26. Safari/Chrome (Webkit) – Cannot hide iframe vertical scrollbar
  27. Delay mouseout/hover with CSS3 transitions
  28. Apply webkit scrollbar style to specified element
  29. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?
  30. using a div to blur an image behind it? [duplicate]

Leave a Comment