Issue #2366Opened November 1, 2019by benvmatheson1 reactions

Text-shadow removes rgb values when element selected

Question

Example: https://jsfiddle.net/benvmatheson/g1ft06qh/8/

Import a style with a text property. text-shadow:rgb(51, 166, 58) 4px 4px 4px;

This works correctly, and the item is displayed correctly. However, once the item is selected, the rgb value is dropped and replaced with 0. text-shadow:0 4px 4px 4px;

Answers (3)

benvmathesonNovember 9, 20191 reactions

It looks like targetUpdated is run twice when the element is clicked. Once with the correct value rgb(89, 89, 89) 5px 6px 7px and a second time with rgb cleared 0 5px 6px 7px. This would explain why it's confused whether the first or last number should be interpreted as the color.

Any ideas where this second run would come from?

artfNovember 2, 20190 reactions

Yeah, I'm already aware of this issue. Unfortunately, the Style Manager parser is quite dumb and what it does is simply splitting the value by a separator, in this case ' ' (space), and distributing splits to relative properties by their order in the definition. So, technically, this change would make it work 4px 4px 4px rgb(51, 166, 58), but... unfortunately it doesn't and this is due to CSSOM inconsistency. Probably the "best solution", in this case, would be to change the text-shadow property definition but, to be honest, I'd prefer to find a more solid solution. A bit smarter parser might be a good start... so, I'm open to any suggestion/help to this issue

benvmathesonNovember 4, 20190 reactions

This seems like it could turn into a big project due to cross browser dependencies. Would it be worth bringing in a 3rd party module instead of trying to solve this inside grapes?

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.