CSS repeating-linear-gradient broken at Safari 10/11

Question

nish252 Author

Level 1

8 points

CSS repeating-linear-gradient broken at Safari 10/11

CSS repeating-linear-gradient that we have used for showing progress bar looks broken in Safari 10/11.

It works out in other browsers but in Safari doe not looks like a repeating pattern but a random ordered pattern.

I have found StackOverflow questions asking this same issue, without any solution.

Please check the links below and notice the pictures to get a better understanding of my issue.

https://stackoverflow.com/questions/48691921/css-repeating-linear-gradient-broke n-at-safari-11

https://stackoverflow.com/questions/43401841/repeating-linear-gradient-breaks-in -safari

Apple support, please solve this issue.

macOS High Sierra (10.13.1), Safari 10/11

Posted on Apr 4, 2018 1:41 PM

Reply

Answer 1

Apr 4, 2018 3:43 PM in response to nish252

In the first stack overflow link, the CSS3 renders correctly in Safari 11.1 and Firefox 59.0.2 — on El Capitan 10.11.6, and High Sierra 10.13.4. As you see below:

The second stack overflow link does not render in any above browser on the mentioned operating systems. It does not render in Google Chrome 65 on 10.13.4 either — contrary to that poster's claim that it does work in Chrome (somewhere).

Reply

Answer 2

nish252 Author

Level 1

8 points

Apr 4, 2018 4:26 PM in response to VikingOSX

Sorry to say but you are wrong. In the first Stack overflow link CSS is not rendered properly in the Safari.

I have just used the codepen demo and both Chrome Version 65.0.3325.181 (Official Build) (64-bit) and Safari Version 11.0.1 (13604.3.5) and I see the exact output as the StackOverflow Link.

I'm copying and pasting the image below from the first Stack Overflow link.

I agree that the second link does not show the image properly but as it helps us understand that more people are having the same problem.

Reply

Answer 3

Eric Root

Level 10

684,597 points

Apr 4, 2018 1:57 PM in response to nish252

Apple doesn’t routinely monitor the discussions. These are mostly user to user discussions.

Send Apple feedback. They won't answer, but at least will know there is a problem or a suggestion for change. If enough people send feedback, it may get the problem/suggested change solved sooner.

Click here to send Feedback

Reply

Answer 4

Apr 4, 2018 3:12 PM in response to nish252

Posting in the Safari community is the correct thing to do.

Apple does have a specific Safari feedback page on theiroverall feedback site. Products that are installed with the operating system, and do not have their own specific feedback page are handled by the macOS feed back page.

Reply

Answer 5

Apr 4, 2018 6:32 PM in response to nish252

I was very specific about browser versions and operating systems used in actual tested and observed results. Reread my post, because I used Safari 11.1, not 11.0.1 which you, and the stack overflow poster used in common. I stand by my post.

I simply did not have the older Safari 11.0.1 browser to confirm the probable bug in the CSS3 repeat-linear-gradient, that is now fixed in Safari 11.1.

Reply

Answer 6

nish252 Author

Level 1

8 points

Apr 4, 2018 2:21 PM in response to Eric Root

Thanks Eric. I have sent a feedback. In Apple Support website I could not find a support team specific to Safari. That's why, I posted my question here.

Reply

Answer 7

Eric Root

Level 10

684,597 points

Apr 4, 2018 2:36 PM in response to nish252

You are welcome.

Reply

CSS repeating-linear-gradient broken at Safari 10/11

Similar questions