Improper Bg Repeat CSS Being Set
Question
When importing components and initializing grapesjs, the css background-repeat property is being changed to background-repeat-x and background-repeat-y, which breaks on iOS.
Import components:
<div id="izmt">Test Begin<br />
<br />
<br />
<br />
Test End</div>
<style type="text/css">#izmt{background-image:url("/path/to/img.jpg");background-repeat:repeat-x;}
</style>
This is how it looks before:
Mobile
Desktop
Initialize GrapesJs, select an element, and then get the output code, and it comes back:
<div id="izmt">Test Begin<br />
<br />
<br />
<br />
Test End</div><style>* { box-sizing: border-box; } #izmt{background-image:url("/path/to/img.jpg");background-repeat-x:repeat;background-repeat-y:no-repeat;}</style>
This is how it is rendered after:
Mobile
Desktop
Answers (3)
Thanks. I added this to my storage manager function... I think it patches the problem for the time being... I am not quite awake yet, so please let me know if I messed something up.
var css = editor.getCss();
// Fix the JavaScript Parser for the background repeat.
var noRepeat = /background-repeat-x:no-repeat;background-repeat-y:no-repeat;/g;
var repeat = /background-repeat-x:repeat;background-repeat-y:repeat;/g;
var repeatX = /background-repeat-x:repeat;background-repeat-y:no-repeat;/g;
var repeatY = /background-repeat-x:no-repeat;background-repeat-y:repeat;/g;
css = css.replace(noRepeat, 'background-repeat:no-repeat;');
css = css.replace(repeat, 'background-repeat:repeat;');
css = css.replace(repeatX, 'background-repeat:repeat-x;');
css = css.replace(repeatY, 'background-repeat:repeat-y;');
Thanks @Coyote6 we're already aware of this issue. This happens due to the browser's CSS parser and I can't do much about until there will be a possibility to attach custom CSS parsers, hope to implement it soon.
From https://github.com/artf/grapesjs/releases/tag/v0.14.33 you can use custom CSS parsers, the first to be released is grapesjs-parser-postcss
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1816
Not allowing to upload same image on same the position after delete that image
Ajax call which is uploading image file in assests folder It's working fine to add an image from the local. But in another scenario, It's n...
Issue #1448
Child component not selectable when using custom view
I'm trying to create a custom component that creates it's own view with nested HTML. I do not want this HTML to be rendered as a component...
Issue #563
Table <thead> and <tbody> tag gets Omitted
Hello, There is new issue with GrapesJS (maybe). I've created new component using bm.add() in which I've used a table element with <thead>...
Issue #461
RTE toolbar appears in the top panel
Hi, We recently updated GrapesJS from 0.8.8 to 0.12.15. After the upgrade, I found that the rte-toolbar appears in the top panel for some r...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.