CSS "repeating-linear-gradient" unstable/imprecise during resizing

• Component: CSS
• Status: RESOLVED INVALID

[Tobi Reif]

Regarding this page:
http://codepen.io/TobiReif/pen/PNRNYy

In Safari 9, the pattern generated using CSS's "repeating-linear-gradient" is unstable/imprecise during resizing (when I move e.g. the right edge of the browser window).

(Probably best to try to reproduce it on a non-high-res screen.)

Related info:
In Chrome, the pattern is completely stable during resize.

[Tobi Reif]

Current URL: https://codepen.io/TobiReif/pen/BKrXMV .

[Simon Fraser (smfr)]

Can you simplify the test case to a single gradient with fewer stops?

[Tobi Reif]

Here you go:

https://codepen.io/anon/pen/VrmbRX

Safari renders sets of 3 stripes, and also sets of 4 stripes. Also please resize ➞ chaos.

Works as expected in eg Chrome and Firefox.

I hope this can get fixed 😀

[Tobi Reif]

Created attachment 326317 [details]
Screenshot of https://codepen.io/anon/pen/VrmbRX in Safari 11.0.1 (13604.3.5)

[Simon Fraser (smfr)]

Thanks for the reduction!

[Radar WebKit Bug Importer]

<rdar://problem/35413671>

[Simon Fraser (smfr)]

This is a bug in a framework below WebKit.

[Tobi Reif]

So it's necessary to file a bug report for that framework, right?

[Tobi Reif]

Current URL:
https://tobireif.com/demos/css_pattern/

Has the issue been reported to the developers of the underlying framework?

[Alexey Proskuryakov]

Yes, it's been reported (the rdar:// link is an Apple internal link to the report). Marking as INVALID, as this is not a WebKit issue.

Thank you for reporting it!

[Tobi Reif]

Thanks!

Ideally you'd leave it open until https://tobireif.com/demos/css_pattern/ works correctly in Safari. I'd hope to automatically get an email notification, which would allow me to then delete the text in https://tobireif.com/demos/css_pattern/ -> "show info" :

"Might not work correctly in Safari: [link:]bug report."

[Tobi Reif]

Works perfectly now. Thanks!