search

marcj / css-element-queries

CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.
http://marcj.github.io/css-element-queries/
MIT License
4.27k stars 487 forks source link

Bug with redundant position:relative on <body> #280

Closed exteon closed 4 years ago

exteon commented 4 years ago

For some reason, I'm using ResizeSensor to watch for changes in the <body> element's size and I get the following behavior in Chrome: when one sets position:relative on <body> and there is a bottom (horizontal) scrollbar, your appended sensor 100% height element will take <body>'s outer height (so, including scrollbar). When there's no position:relative, it will take the <body>'s client height. The second case is obviously desired for measurement (ResizeSensor will not trip when bottom scrollbar gets added). I fixed it by simply not adding position:relative on body, especially since every browser has it's own hack-ish method of performing <html> and <body> scrolling and 100% sizing. So would you please add an exclusion for trying to change position on the <body>.

Context: I'm watching <body>'s size precisely to detect when scrollbars are added on desktop, not in a window.resize context but in a DOM context (DOM is manipulated that results in scrollbars being added). While I could do this by replicating some of your code (watching for a hidden scrollable element), I find using your whole bunch of code very useful for other purposes as well, so I'd be happy if the npm package would have the <body> exception built in :)

marcj commented 4 years ago

It's not a bug when the use-case is not supported. I can't see a reason why monitoring the body for size changes would be useful, so that use-case will likely stays unsupported, sorry.