shouldiprefix
shouldiprefix copied to clipboard
davidhund
Background-image-options
Hi David,
Unfortunately, a vendor prefix is still requred when using a linear-gradient for the background-image under Chrome Browser Version 56.0.2924.76 Your site is invaluable for me.
.grad1 { background: gray; background: -webkit-linear-gradient( left top, #808080, #ffffff ); background: linear-gradient( left top, #808080, #ffffff ); }
Hi @KerryRuddock — thanks for the kinds words.
However: I don't think you need the -webkit- prefix for Chrome 56.
You can check a test-page here Both my test Chrome 49 and Mobile Chrome 55 picked up the green gradient.
It should be supported prefixless from 26+
However, I believe there are some issues with Android's UC browser (which has a lot of market share), so I'll look into it.
David,
I see that your codepen is using background-image which does indeed work.
I am saying that using the shorthand background property is where the -webkit- prefix is still needed. Running on chrome browser on windows 7.
You can check my codepen here
You are using a deprecated syntax e.g. 'left top' and 'bottom right'. Replacing this with e.g. 300deg should work… Keywords such as left and top need the to prefix: to left, etc.
background-clip needs prefix on Chrome (-webkit-background-clip) otherwise it'll be ignored as invalid property.
Check this codepen on Chrome (I've tested it on Chrome 62, Windows 10 64-bit). When the -webkit-background-clip is removed in favor of the unprefixed background-clip, the text will turn into a gradient block.
@ramtinsoltani — you are correct that background-clip needs a -webkit- prefix in WebKit browsers (and Edge).
However: This only goes for the not-yet-standard text value.
I agree we should probably mention it in background-image-options.md
Would you care to open a PR?
@davidhund — I just opened a pull request with the background-clip prefix mentioned in the CSS example.