Carbon: Broken image (overlay lines)

[Akiyamka]

Expected Behavior

In editor code look ok

Actual Behavior

But after export as image or share - broken

Carbon link

Browser:

Google Chrome Version 72.0.3626.121 (Official Build) (64-bit)

Code Snippet (If Applicable)

const numbers = [ 1, 3, 5 ];
const result = numbers.reverse().map((n, i) => n + numbers[i]);
console.log(result);

[mfix22]

Thank you for including all the relevant details — I am looking into this! Haven't been able to reproduce yet.

[mfix22]

@Akiyamka are you still experiencing this issue? I cannot reproduce it in Chrome.

[Akiyamka]

@mifix22 Yes, nothing change, png Image still exported broken.
Maybe next information about my system can help:

OS: Ubuntu 18.04.2 LTS x86_64 
Resolution: 3840x2160 

Also - bug doesn’t reproduce on firefox quantum (66.0.3 64)

[benjaminwood]

This also happens to me under ubuntu & google chrome. Must be a chrome on linux specific issue (classic :neckbeard: problems)

[isaacgr]

Im seeing this issue when I export the image in Chrome on Windows.

Version 74.0.3729.169 (Official Build) (64-bit)

Seeing this in the console when I export the image. Not sure if its related.

Error while reading CSS rules from https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.42.2/theme/panda-syntax.min.css SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

[jwulf]

https://zeebe.io/img/blog/2019/10/nestjs-tx-email/carbon.svg

Broken on Firefox Quantum 69.0.1 on Windows and Mac OS.

Looks fine on Google Chrome 77.0.3865.90 on Mac.

[deadcoder0904]

Same issue with Mac OS Catalina v10.15.2 & Chrome v80.0.3987.149 (Official Build) (64-bit). For more info, check #979

[mfix22]

@deadcoder0904 I assume this has to do with a very slight width miscalculation, which only happens with specific window dimensions. I'm guessing this is why I can't recreate it even under the same conditions.

If you change the window/screen dimensions by zooming in/out, does the issue still persist?

[deadcoder0904]

I zoomed out to 75% but it still happens

[manishsundriyal]

@mfix22 Maybe this will help
Back when I was using Ubuntu + Chrome I had faced the issue a lot. My hack was to add some extra whitespaces at the end of lines which are moving onto the next lines.

[mfix22]

I have never been able to reproduce this issue, but if anyone is able to reproduce this locally, I am wondering if adjusting this config slightly solves the issue: https://github.com/carbon-app/carbon/blob/master/components/Editor.js#L156 — either by measuring the container differently, or simply by bumping the width by a couple pixels.

[manishsundriyal]

@mfix22 It might work as it was moving the text content which is closer to the right border.
If not, then I will try it once this COVID-19 scene improves in my city.

[mfix22]

@manishsundriyal awesome, and absolutely _zero_ rush. This is not a big deal at all. Stay safe!

[waseefakhtar]

Has this been solved? I noticed that the downloaded PNG looks fine, but when uploaded somewhere, the overlay lines appear. Odd though that it hasn't appeared here:

When I uploaded the same image to Twitter, the lines appeared:

https://twitter.com/waseefakhtar/status/1331700567698075648

Any idea why that might be?

[mfix22]

@waseefakhtar which operating system/browser are you using? When I click on that Twitter link, it looks fine to me:

[waseefakhtar]

@waseefakhtar which operating system/browser are you using? When I click on that Twitter link, it looks fine to me:

I was using Chrome 87.0.4280.67 (Official Build) (x86_64) on macOS Big Sur. When I downloaded it back from Twitter, it exported with the white lines:

[Olvi73]

Hey I met this bug when i export this code, it's a part of the php code.
Chrome 87.0.4280.88 + Windows 10
export option: 2x png

            <input type="reset" name="reset" id="reset" value="重设" />
        </td>



        </tr>
    </table>
</form>
</body>
</html>

editor

export png