FremyCompany / FremyCompany/css-grid-polyfill

Doesn't update after parent display changes

Open
#49 1 comment 0 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.