Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text goes out of align with line numbers when editor scrolls when taking a new line #73

Closed
jpallen opened this issue Jan 31, 2011 · 6 comments · May be fixed by OutSystems/ace#3
Closed

Comments

@jpallen
Copy link
Contributor

jpallen commented Jan 31, 2011

Lines of text have their vertical positioning set incorrectly when pressing enter at the end of a document causes the editor window to scroll. See the screenshot here: http://i.imgur.com/4Ld3V.png . The numbers in the document correspond the to line they are on and are out of alignment with the line numbers.

To reproduce, open the latest editor demo and begin to press enter at the bottom of the file. As soon as enough new lines are taken to cause the editor window to scroll, the lines will start to go out of sync. I have tested this in Chrome 8.0.552.237 and Safari 5.0.3. The bug does not seem to appear in Firefox.

I think this may be an issue or subtlety with the rendering engine of WebKit. Using the DOM Inspector shows the div.ace_content element to be shifted to the wrong place (also visible in the screenshot). If I manually remove the 'position: absolute' property from div.ace_scroller and then add it back in then div.ace_content is updated to the correct position. This seems to suggest that Ace is setting up the correct CSS properties, but something is going wrong in the rendering of them. I'm afraid at this point I don't know how to proceed with investigating the problem.

Please let me know if I can provide any more information or if you have any suggestions on how to track down the root cause of this bug. I stumbled across the editor a while ago, but only tried it out today. It's an amazing piece of work, thank you.

@cipater
Copy link

cipater commented Feb 1, 2011

I too am experiencing this problem. In my case however, if I scroll down further than the height of the editor and press enter, all of the text disappears... (though the text does reappear if I select all the text via command-a).

Using safari 5.0.3 and Chrome 9.0.597.83 beta.

@adamjimenez
Copy link
Contributor

I'm having text disappear in chrome - works in firefox tho.
See:
http://shiftedit.net/tests/multiple-aces

@fjakobs
Copy link
Contributor

fjakobs commented Feb 1, 2011

Thanks for the bug report. I was able to track this down. For IME support I move the hidden textarea below the cursor. When the cursor hits the bottom of the page the browser tries to scroll the textarea fully into view. This results in the broken rendering because the scroller's scrollTop is changed behind the scenes. I have now changed the way the textarea is positioned. This fixes it for me.

I have also bumped the packaged version to 0.1.2 and updated the download.

@adamjimenez
Copy link
Contributor

Can't believe how quick that got fixed and packaged!

Fixes it for me also. Thanks Fabian.

@jpallen
Copy link
Contributor Author

jpallen commented Feb 1, 2011

This solves the issue for me as well. Thank you for an overnight fix.

@don-sergio
Copy link

I think there is the same problem with the width when i use the editor with flex !
I'm using the version 0.1.9 of ng2-ace-editor.

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants