How to remove Greyish background on background-image with transparent in linear gradient on Safari

Question

I wanted to create this question to then answer it in case someone comes across it in the future. There seems to be some issue with using transparent as a color variable in a linear gradient on background image. I suspect it has something to use with the complete use of background-image AND linear gradient AND transparency AND Safari. It produces a strange greyish color over the area where the background image is suppose to appear.

 background-image: linear-gradient(to bottom, transparent,#fff);

Answer 1

Solution was to just change background image to background and turn transparency into a rgba of 255, 255, 255, 0.

In Safari, if you view this codepen I created you can see I was able to replicate the issue and compare the differences:

https://codepen.io/marselgray/pen/VwZaQyY?editors=1100#0

 .box{
   height: 100px;
   width: 100%;

   &--background{
     background: linear-gradient( to bottom, rgba(255,255,255,0),#fff);
   }

   &--backgroundimage{
     background-image: linear-gradient(to bottom, transparent,#fff);
   }
}