2

I have a simple question with very simple example,

I have added filter: blur(2px); on body tag, after that position fixed on ul tag has stopped working. Its behaving as position absolute. When you remove that filter from body every thing gets normal. Any Suggestion?

JSFIDDLE

Hushme
  • 3,108
  • 1
  • 20
  • 26

1 Answers1

3

Instead of blurring the body tag, you can add the filter to the html tag and that will inherit all the child elements.

html{
  filter: blur(2px);
}

You can add more information about what you are trying to achieve blurring the whole page and maybe we can find a better solution.

Here you have an article which explains the difference between the body tag and html tag

MartinBA
  • 797
  • 1
  • 5
  • 15
  • I see your solution but question is why its not working on body tag, beside body you implement on any child element with fixed css it causes problem – Hushme Nov 09 '18 at 13:43
  • Just made an edit with an article. If you add the filter to the body element its gonna cover the whole page, you are scrolling over the filter, that's the problem, If there is a background on the html element, the body background behaves just like any other element. – MartinBA Nov 09 '18 at 14:00
  • Yes i knew that but thing is how can we avoid such conflict – Hushme Nov 09 '18 at 14:01
  • I misunderstood the question, sorry for that, It looks like it's a bug for some google chrome and firefox versions, check this question -> https://stackoverflow.com/questions/51589185/css-filter-invert-rule-breaking-fixed-position-on-chrome-68 , I tested the same code on Safari and it work well. – MartinBA Nov 09 '18 at 14:50
  • @FedericoMartin it's not a bug, it's a feature : https://stackoverflow.com/questions/52937708/css-filter-on-parent-breaks-child-positioning/52937920#52937920 – Temani Afif Nov 09 '18 at 19:35
  • @TemaniAfif Thank you for clearing that up! – MartinBA Nov 09 '18 at 19:52