CSS 过渡在 chrome 中工作，但不是 safari

Question

在我的标题中的 div(pa-search-style) 中有一个简单的按钮，它应该显示一个包含多类别搜索表单的下拉菜单。

这是我目前实现的代码，它似乎适用于 chrome，但不适用于 safari。

#pa-search-style  {
    --size-pa:100px;
    max-height: var(--size-pa);
    overflow:hidden;    
    -webkit-transition: max-height 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#pa-search-style:focus-within  {
    --size-pa:450px;
}

这么简单的问题，但我没完没了的谷歌搜索却一无所获。我现在已经准备好让你们中的一个人让我觉得自己像个白痴。

Answer 1

不要只是改变变量，重新应用它。

#pa-search-style:focus-within  {
    --size-pa:450px;
    max-height: var(--size-pa);
}