Bug 249076
| Summary: | Using @media to switch grid-column causes crash | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Wenzel Massag <mail> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | ap, bfulgham, mattwoodrow, sgill26, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 16 | ||
| Hardware: | Mac (Apple Silicon) | ||
| OS: | macOS 13 | ||
Wenzel Massag
# The issue:
When I resize the window across the threshold in .classB (in the example it is 1280px) in either direction, the page crashes and reloads.
## Description of the CS below:
I use a CSS variable to define the number of columns in my grid based on a media query. I also use media queries to switch between different notations of the grid-column shorthand.
## CSS:
```CSS
.classA {
--number-of-columns: 4;
display: grid;
grid-template-columns: repeat(var(--number-of-columns), 1fr);
column-gap: 16px;
}
@media (min-width: 744px) {
.classA {
--number-of-columns: 12;
column-gap: 32px;
}
}
.classB {
grid-column: span var(--number-of-columns);
}
@media (min-width: 1280px) {
.classB {
grid-column: 4 / 10;
}
}
```
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Alexey Proskuryakov
Thank you for the report! Could you please attach a complete test case? Just putting this stylesheet doesn't reproduce the crash, unsurprisingly.
Radar WebKit Bug Importer
<rdar://problem/103482850>