Follow up from yesterday: subgrid with different tags browser incompatibility.

I vented yesterday rather than asking a question, but today I have a question. I haven't got codepen so code attached as a self-contained HTML, hope this is ok. Situation is I am trying to use subgrid with labelled columns across browsers. caniuse says that everything I want to use supports it... but... Firefox works perfectly and everything else does not. (See screenshot, Firefox is the bottom one.) Or... rather... Subgrid works perfectly on all browsers unless I use fieldset. Anybody any insight as to why fieldset would behave differently to div and why caniuse doesn't distinguish this? Can I / should I report this to canIuse ?
2 Replies
gaiuscoffey
gaiuscoffeyOP8mo ago
PS: I have a sort-of workaround by "inherit"ing the columns for fieldset. Not perfect by any means, but at least allows me to use the correct tag for the correct purpose.
fieldset.subgrid {
grid-template-columns: inherit;
}
fieldset.subgrid {
grid-template-columns: inherit;
}
PPS: Also, I have "width:100%;" in the .subgrid that is not needed.
MarkBoots
MarkBoots8mo ago
yep, it seems there is something strange going on with fieldset with a display grid in chrome. fieldset is a strange element. It supposed to be a block element, but (I think) because of the legend position, it not really is. I guess browsers implented it differently. There was a bug 5 years ago in grid itself (which was solved), but apperently it is back now with subgrid https://issues.chromium.org/issues/40366646#comment91
Want results from more Discord servers?
Add your server