[FIX] web_editor: span gradient across text style changes
Since [1] the gradient text image was reset within each font or span block (e.g. for applying bold style). The change was done because Chrome does not inherit the involved styles when a transform is used, which is the case in animated texts. After this commit the inherit style is only applied on animated texts. This lets the gradient span across style changes. Note that there is no solution yet for animated texts: they still have a restarted gradient. Steps to reproduce: - Drop a Title block in a website page. - Add a few words. - Select the whole title's text. - Make its text color a gradient. (Not the background color) - Select the second word (avoid picking the word in the middle to easily see the visual impact). - Make that word bold. => The gradient restarts within the bold word instead of continuing across the whole text - even though no text animation is used. [1]: https://github.com/odoo/odoo/commit/187acb938f70a2130d25fa76079221339c742f1e task-2666200 X-original-commit: 372eeebb47b93890d567185879981e817cdc1326 Part-of: odoo/odoo#109537
This commit is contained in:
@@ -892,10 +892,11 @@ section, .oe_img_bg, [data-oe-shape-data] {
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
// FIXME (or wait for a fix in Chrome): the code below is needed to make
|
||||
// animated text work with gradient background on Chrome. But the side
|
||||
// effect is that text node wrapping by a span (e.g. bold, italic) no longer
|
||||
// have the "gradient crossing all the text" on it but its own gradient.
|
||||
* {
|
||||
// animated text work with gradient background on Chrome. It is not based
|
||||
// on ".text-gradient *" only to avoid a side effect that makes text nodes
|
||||
// wrapped in a span (e.g. bold, italic) no longer have the "gradient
|
||||
// crossing the whole text" on them but their own gradient.
|
||||
.o_animated_text, .o_animated_text *, &.o_animated_text * {
|
||||
background-image: inherit;
|
||||
-webkit-background-clip: inherit;
|
||||
-webkit-text-fill-color: inherit;
|
||||
|
||||
Reference in New Issue
Block a user