Issue #1319Opened July 25, 2018by jmrgz0 reactions

BUG Box shadow - not working in the demo too

Question

I have noticed this too late, a few days after finishing my project. I wanna cry :(

To reproduce the steps:

1- Go to the demo and select any "card" block (any of the blocks under the ### Flex is the new black title). Be sure that you are selecting the main parent (.card class)

2- As long as you select it, they automatically lose their normal state box shadow (values are bugged after selection).

3- Now change to hover state, they will lose their shadow too (again bugged values)

This happens with every design when you save/open or when you reload the page on the current design.

Any workaround? I would not like to remove the whole box shadow property from my project.

Thank you very much!

Answers (3)

artfJuly 26, 20180 reactions

Unfortunately, this is caused by the browser's CSS parser which rearranges the order of box-shadow values, so if you import your templates from HTML we can do nothing until we'll be able to use custom CSS parsers (I close this in favor of #1079), but if you create templates from the editor and store them correctly it should be ok

jmrgzJuly 26, 20180 reactions
Code SnippetTEXT
Thank you @artf 

Is there any clue of what part of the code "explodes" the browser parser attributes to fill in complex style manager properties? (it happens when you open the style manager)

I would love to know where you transform this:
box-shadow:10px 10px 5px 10px black ;

Into this:
X position: 10px;
Y position: 10px;
Blur: 5px;
Spread: 10px;
Color: black;

That would allow me to detect and try to correct this bug. Unfortunately, with my current latest grapesjs init, the box shadow border still happens even if you create the templates in the editor.

Thanks!
lock[bot]September 17, 20190 reactions

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

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.