Issue #3472Opened May 24, 2021by YyueeiWY2 reactions

BUG: Css attribute (-webkit-background-clip:text;) doesn't work in grapesjs-preset-webpage.

Question

Version: "grapesjs": "^0.17.3" "grapesjs-preset-webpage": "^0.1.11"

You can get the version by typing grapesjs.version into the console

Are you able to reproduce the bug from the demo?

  • Yes
  • No

What is the current behavior? Css attribute (-webkit-background-clip:text;) doesn't work in grapesjs-preset-webpage(disappear when import). But it works in Grapesjs offical demo. https://grapesjs.com/demo.html Is GrapesJs official demo source different to plugin grapesjs-preset-webpage?

Describe the bug detailed I'm trying to import the css attribute (-webkit-background-clip:text;) to grapesjs-preset-webpage, but it didn't work well(it disappears when import). Then, I try to import to same code at GrapesJs official demo, and it's work. I have no idea what's going on. Please Help!

Are you able to attach screenshots, screencasts or a live demo?

  • Yes (attach)
  • No

From grapesjs official demo https://grapesjs.com/demo.html It's work when import css attribute (-webkit-background-clip:text;) InkedCapture_LI

From downloaded grapesjs-preset-webpage demo (-webkit-background-clip:text;) disappeared when I import css attribute (-webkit-background-clip:text;)

Code SnippetTEXT
![InkedCapture1_LI1](https://user-images.githubusercontent.com/38772689/119304401-c705db00-bc99-11eb-9693-87ebee0bad39.jpg)

Both Import the same code:
![Capture3](https://user-images.githubusercontent.com/38772689/119305033-b7d35d00-bc9a-11eb-95fd-b6504398fcb6.PNG)

code below:
<pre>
&lt;h1 class="h1"&gt;
   asdsd
&lt;/h1&gt;

<style>* {
  box-sizing: border-box;
  }
  body {
    margin: 0;
  }
  *{
    box-sizing:border-box;
  }
  body{
    margin:0;
    background:black;
  }
  .h1{
    background:linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
    -webkit-text-fill-color:transparent;
    -webkit-background-clip:text;
  }
  </style>
  </pre>

Answers (1)

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.