search

adobe / brackets

An open source code editor for the web, written in JavaScript, HTML and CSS.
http://brackets.io
MIT License
33.25k stars 7.63k forks source link

Live preview issue - page displayed multiple times #8151

Open casterle opened 10 years ago

casterle commented 10 years ago

I'm using Brackets sprint 40 with Chrome 35.0.1916.153m. The problem I'm having is that sometimes Chrome does not update the displayed page, but instead postpends my changes to the bottom of the existing page.

For example, if I have a page that displays:

1

and I edit the page in Brackets, sometimes Chrome will display:

2

This occurs fairly often, perhaps 10% of my edits; refreshing the page fixes the issue. I just learning HTML/CSS so all of my pages to date have been static.

Here's the HTML that most recently caused the issue:

html

BTW, Brackets is an outstanding learning tool! Thank you all for such a great gift!

peterflynn commented 10 years ago

Here's the code as text, pulled from the newsgroup thread:

(@casterle, fyi you can use Markdown formatting syntax to include code in a bug report while preserving formatting)

<!doctype html>
<html lang="en">

<head>
   <meta charset="utf-8">
   <title>List test</title>
</head>

<body>
   <ol start="">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3
         <ol>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
         </ol>
      </li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
   </ol>
   <h3>Definition lists</h3>
   <dl>
      <dt>Term 1</dt>
      <dd>Definition 1</dd>
      <dt>Term 2</dt>
      <dd>Definition 2</dd>
      <dt>Term 3</dt>
      <dd>Definition 3</dd>
   </dl>
</body>

</html>
njx commented 10 years ago

@casterle I just tried this and wasn't able to reproduce it with simple edits. Do you know of a specific sequence of edits that could reliably reproduce the bug? Or do you have a sense of the kinds of edits you've been commonly doing that you could describe? (e.g. copying/pasting list items, adding attributes, deleting items, changing tag types, etc.)

casterle commented 10 years ago

I haven’t been able to correlate the issue to any specific editing activity. I often don’t notice the issue immediately because the duplication is added to the bottom of the page and is thus sometimes not obvious.

Everything I’ve been doing is very simple as one might expect of a student – I’ve not even gotten into the HTML5-specific elements yet. I’ll try to pay more attention to what I am doing when I see the problem in the future.

Before reporting the issue I uninstalled and reinstalled both Chrome and Brackets; no joy.

From: Narciso Jaramillo [mailto:notifications@github.com] Sent: Tuesday, June 17, 2014 16:38 To: adobe/brackets Cc: casterle Subject: Re: [brackets] Live preview issue - page displayed multiple times (#8151)

@casterle https://github.com/casterle I just tried this and wasn't able to reproduce it with simple edits. Do you know of a specific sequence of edits that could reliably reproduce the bug? Or do you have a sense of the kinds of edits you've been commonly doing that you could describe? (e.g. copying/pasting list items, adding attributes, deleting items, changing tag types, etc.)

— Reply to this email directly or view it on GitHub https://github.com/adobe/brackets/issues/8151#issuecomment-46374968 . https://github.com/notifications/beacon/4976282__eyJzY29wZSI6Ik5ld3NpZXM6QmVhY29uIiwiZXhwaXJlcyI6MTcxODY2Mzg2OSwiZGF0YSI6eyJpZCI6MzQ4ODEyNTh9fQ==--b0f694f83f075f0dd1d8edbc154fdfec55b83002.gif

casterle commented 10 years ago

Here's another datapoint. I installed Brackets on a different computer and ran into the same issue. Same versions of Chrome/Brackets. Both computers are i7's running Win7 Ultimate x64 w/latest updates.

casterle commented 10 years ago

The problem seems to be caused by jsbeautifier - whenever I beautify my code the issue occurs. I've opened an issue here: https://github.com/taichi/brackets-jsbeautifier/issues/4

njx commented 10 years ago

Hmmm, interesting - thanks for narrowing that down. That might still be our bug - if the only thing jsbeautifier is doing is making simple text edits, we should be able to handle that (especially if it's just changing whitespace). I'm going to reopen this so we can see if it's on our end.

jeremy-beliez commented 9 years ago

The bug is always here (https://github.com/taichi/brackets-jsbeautifier/issues/4 and https://github.com/drewhamlett/brackets-beautify/issues/49). So beautifier are unusable.

Is it possible to have a working built-in beautifier option in Brackets ?

Thanks.

Hirse commented 8 years ago

The same issue appears on my beautify-fork: https://github.com/Hirse/brackets-beautify/issues/14

As far as I was able to find out, this is the same as this Brackets issue: https://github.com/adobe/brackets/issues/10634 The beautifiers change the whole document including the html tag, which causes LivePreview to not update properly.

bplus commented 8 years ago

Has anyone seen a fix for this? I'm experiencing the same thing.

Hirse commented 8 years ago

Added a work-around here: https://github.com/Hirse/brackets-beautify/commit/3b9dc39312f8e8a852fe4cf2bbac0fa934d043e8

Should be available in the latest version of https://github.com/brackets-beautify/brackets-beautify.

cdokolas commented 8 years ago

I have this problem only when I save the file.

Brackets Release 1.7 build 1.7.0-16898 (release b0a363b71) Chrome Version 52.0.2743.82 m (happens on FF as well)

Observations:

With developer mode on, I see something like this:

<html data-brackets-id="97"><head data-brackets-id="98">
    <style data-brackets-id="99">
        body {
            background-color: #ffcb05ff;
        }
    </style>
</head>

<body data-brackets-id="100">
    <p data-brackets-id="101">Some stuff</p>
    <p data-brackets-id="102">Hello</p>
</body>
</html>

I then have to turn off developer mode and re-enable live preview, because developer mode closes live preview.

After a small edit and "save", I see this (in developer mode):

<html data-brackets-id="127"><head data-brackets-id="128">
    <style data-brackets-id="123">
        body {
            background-color: #ffcb05ff;
        }
    </style>

    <style data-brackets-id="129">
        body {
            background-color: #ffcb05ff;
        }
    </style>
</head>

<body data-brackets-id="130">
    <p data-brackets-id="125">Some stuff</p>
    <p data-brackets-id="126">Hello, world</p>
    <p data-brackets-id="131">Some stuff</p>
    <p data-brackets-id="132">Hello, world</p>
</body>
</html>

What I've found out is that, as long as I don't cause live preview to stop, I can reload the page and get the right content.

It looks like saving the document clears and re-generates the internal node ids, which the live preview updating engine can't find and ends up just creating and appending new nodes to the document. So, the only workaround is to also reload the page every time I save...

imiMike commented 7 years ago

I've got the same issue in Release 1.9 build 1.9.0-17312 (release 189f6d39a) It seems to me that it happens when I edit the same file in the split mode - so the same file is opened in both views (left and right vertical split). The live view is switched on the left view, when I edit the document in the right view and hit enter ( to add a new line) then chrome refreshes the document and duplicates the content of body tag. I have to reload the page every time in chrome to fix that.