Bug 211505 – REGRESSION (r253875?): Element styles incorrect after media query evaluation changes

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[James Brooks]

Created attachment 398603 [details]
A video demonstrating the bug in Safari 13.1

Media queries don't always yield the expected results when resizing my browser window. I have a media query that repositions two divs side-by-side on screen sizes wider the 900px, and on mobile they stack on top of each other. When resizing up from mobile the styles don't update until the page is reloaded. The media queries behave as expected on both Safari 13.0 and Safari 12.1, this issue only seems to be present in Safari 13.1.

The release notes for Safari 13.1 contained the extract:
> Made media query updates more efficient.

I traced that back to the equivalent Safari Technical Preview release notes and found:
> Improved performance by invalidating only affected elements after media query evaluation changes

I think the issues I am seeing are linked to the changes made in r253875 as a result of bug 205392.

I have also been able to validate that the issue is still present on the most recent WebKit build archive at the time of writing this r261218.

[Radar WebKit Bug Importer]

<rdar://problem/62983242>

[Antti Koivisto]

Can you attach the test case?

[James Brooks]

Created attachment 398850 [details]
Basic recreation of the issue

[James Brooks]

I've attached a minimal reproduction similar to the video above - let me know if you need something more specific.

I also spent a bit more time looking into the cause and it seems like the inclusion of a @keyframes rule inside of the media query is at fault in this example. This was a mistake on my part and moving the rule outside of the media query appears to result in the expected behaviour.

I do still think there's a regression here though - in the first instance the @keyframes rule was in a different media query to the one where I had noticed the issue so it seems that this was causing issues with invalidating styles across the tree rather than just the query containing the @keyframes rule? And as I mentioned in the original report, this doesn't appear to have been an issue prior to Safari 13.1.

[Antti Koivisto]

Thanks for the repro. Interesting that it is triggered by an unused @keyframes rule inside @media.

[James Brooks]

Agreed. Not been able to confirm if any other at-rules have the same outcome. I think I used an @supports rule in the repro which didn't seem to cause any problems?

[Antti Koivisto]

Created attachment 401141 [details]
patch

[EWS]

Committed r262618: <https://trac.webkit.org/changeset/262618>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 401141 [details].