Bug 249076

Summary: Using @media to switch grid-column causes crash
Product: WebKit Reporter: Wenzel Massag <mail>
Component: Layout and RenderingAssignee: 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   

Description Wenzel Massag 2022-12-10 11:53:45 PST
# 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;
  }
}
```
Comment 1 Alexey Proskuryakov 2022-12-11 11:25:15 PST
Thank you for the report! Could you please attach a complete test case? Just putting this stylesheet doesn't reproduce the crash, unsurprisingly.
Comment 2 Radar WebKit Bug Importer 2022-12-17 11:54:15 PST
<rdar://problem/103482850>