Skeleton Loader: Mask-image

[patriklarssson]

Bug already reported?

• [X] I confirm that I have checked if the bug already has been reported

For which framework/library you are reporting the bug

Chlorophyll

Component name

Skeleton loaders

Description

Need to add -webkit-mask-image to skeleton loaders since mask-image gives error "unknown property name"

mask-image: url(data.....)

-webkit-mask-image: url(data...)

Steps To Reproduce

add this code to react app

      <div className="skeleton-loader" aria-busy="true">
        Loading content
      </div>

Current Behaviour

Skeleton loader is displayed as a big block

Expected Behaviour

Should display correct shape for skeleton

[vsjolander]

Hello!

Checked the CSS we output and it's with correct prefixes:

Are you building the SCSS yourself maybe you can use Autoprefixer to solve this? This is what we use when we build ours:

npx postcss path/to/file.css --use=autoprefixer -m -r

You can probably add this as a plugin/step in your bundler.