FremyCompany / FremyCompany/css-grid-polyfill
Doesn't update after parent display changes
- Dominant language
- JavaScript
- Stars
- 1.1k
- Forks
- 81
- PR merge metrics
- No merged PRs in 30d
Description
I found if used as a child element within an (emulated using `display: none`) `` that it is never detected that the grid is displayed, seemingly because such attribute changes are not being observed.
From what I can tell this is because it inserted id's and CSS rules forcing a size of zero already, and so when displayed its still zero and no update :(
One possibility I found is to also check for `offsetParent`. In simple cases it will be `null` if not displayed, but its also `null` if the element itself is `positioned: fixed` at which point I am not sure.
[css-grid/polyfill.js#L95](https://github.com/FremyCompany/css-grid-polyfill/blob/12359c5369cb26b6bbcf4a3d82cad6bbacf81d4e/src/css-grid/polyfill.js#L95)
```javascript
// TODO: watch resize events for relayout?
var lastWidth = element.offsetWidth;
var lastHeight = element.offsetHeight;
var lastParent = element.offsetParent; // Added
var updateOnResize = function() {
if(!element.gridLayout) { return; }
if(lastWidth != element.offsetWidth || lastHeight != element.offsetHeight ||
lastParent !== element.offsetParent) {
// update last known size
lastWidth = element.offsetWidth;
lastHeight = element.offsetHeight;
lastParent = element.offsetParent;
// relayout (and prevent double-dispatch)
element.gridLayout.scheduleRelayout();
}
requestAnimationFrame(updateOnResize);
}
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.