Margins creeping in from ancestors, even when polyfill not needed

[tremby]

I've got an element with display: grid; gap: 4rem;. It's a grid so it doesn't even need the polyfill but I understand why it applies rules anyway -- the "grid" part may be composed from a different ruleset, and you've no way of knowing.

But I've configured the plugin with flexGapNotSupported: ".no-flex-gap", and that class is not present since I'm testing with a browser which doesn't need the polyfill.

In this scenario I'd expect the polyfill not to apply any rules at all.

But I'm seeing a margin being added to my grid element, via --orig-margin-top, of positive 3rem. I see that this variable is being set on a container multiple levels up -- it's nothing to do with the container I want to be a grid.

I don't see this scenario mentioned in the readme, but surely it's very common.

Example:

.wrapper {
  margin: 3rem 0;
  border: 1px solid black;
}
.grid {
  display: grid;
  gap: 4rem;
  grid-template-columns: 24rem 1fr;
  border: 1px solid red;
}

<div class="wrapper">
  <h2>whatever content</h2>
  <div class="grid">
    <div>cell 1</div>
    <div>cell 2></div>
  </div>
</div>

The margin-top of .wrapper is being added to the margin-top of .grid, even though there should be no margin at all.

[gavinmcfarland]

Hi Bart, thanks for taking the time to raise this issue.

I can see the problem you're encountering and why it's happening. It should be fixable, I just need to think of the best way to go about it.

Because the plugin is a pure CSS polyfill it assumes (by default) that any element could have another class applied to it which could have the property display: flex | inline-flex. That's why all styles for margin-top and margin-left are rewritten, even the ones that have nothing to do with flex for grid. What it looks like is happening here is that the margin is creeping in as you say, from the parent containers which shouldn't be happening. There are a number of ways I could prevent this, I just need to find the most appropriate way.

In your particular use case as, a workaround it may be enough to disable the "loose" polyfill by passing in the option of { only: true }. You also have the option the manually specify which rules should get polyfilled using /*apply fgp */. Meanwhile, I'll see if I can find time to fix this issue.

[gavinmcfarland]

I know it's been a long time since you raised this issue, but this bug should be solved in the latest release.