[Webkit-unassigned] [Bug 249076] New: Using @media to switch grid-column causes crash

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=249076

            Bug ID: 249076
           Summary: Using @media to switch grid-column causes crash
           Product: WebKit
           Version: Safari 16
          Hardware: Mac (Apple Silicon)
                OS: macOS 13
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: mail at wmassag.de

# 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;
  }
}
```

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20221210/efa8fbd7/attachment.htm>