Broken image (overlay lines)

[Akiyamka]

Expected Behavior

In editor code look ok

Actual Behavior

But after export as image or share - broken

[Carbon link](https://carbon.now.sh/?bg=rgba(171%2C%20184%2C%20195%2C%201)&t=seti&wt=none&l=javascript&ds=true&dsyoff=20px&dsblur=68px&wc=false&wa=true&pv=56px&ph=56px&ln=false&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=const%2520numbers%2520%253D%2520%255B%25201%252C%25203%252C%25205%2520%255D%253B%250Aconst%2520result%2520%253D%2520numbers.reverse().map((n%252C%2520i)%2520%253D%253E%2520n%2520%252B%2520numbers%255Bi%255D)%253B%250Aconsole.log(result)%253B)

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

[rkoleci]

Can you assign this to me ?

[mfix22]

Can you assign this to me ?

@rkoleci done! However, please feel free to submit PRs to fix any bugs without assignment. No need to claim issues before fixing PRs.

[tasty0tomato]

Broken on all the latest chromium based browser (Edge, Edge dev, Edge Beta, Edge Canary, Chrome, Chrome Dev, Chrome Beta, Chrome Canary), but works on the latest Firefox Extended Support in Windows 10.

[mfix22]

Broken on all the latest chromium based browser (Edge, Edge dev, Edge Beta, Edge Canary, Chrome, Chrome Dev, Chrome Beta, Chrome Canary), but works on the latest Firefox Extended Support in Windows 10.

@tasty0tomato could you share a snippet that reproduces this issue?

[Vadimyan]

Hi. I have the same issue on Windows 7 / Chrome 107.0.5304.88 and Windows 7 / Opera 92.0.4561.33 and MacOS / Chrome. It reproduces even on the default snippet and default settings.

[changchiyou]

Hi. I have the same issue on macOS Ventura 13.5 Chrome 版本 116.0.5845.96 (正式版本) (arm64) with VScode/Python.

In editor:

Actual:

[changchiyou]

@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.

BTW, this work for me. Just add a single space at the end and the problem solved.