1

私が取り組んでいる Web アプリケーションで奇妙なバグに遭遇しました。Chrome と Safari では再現できましたが、Firefox では再現できませんでした。

バグを確認するには、www.lastcalc.comにアクセスして、大文字を 1 文字入力してください。文字は、DIV.question (contentEditable が true に設定された DIV) の「keydown」イベントのリスナーを介して、白い「ボタン」CSS ですぐに強調表示されます。これは、locutus.js の highlightSyntax 関数によって実行され、Rangy ライブラリに依存して、強調表示中にカーソル位置を追跡します。

ここまでは順調ですが、ここで [削除] をクリックします。突然、Safari で次の構造が表示され、中央の br 要素にカーソルが置かれます (視覚的にテキストは中央に配置され、色 #606060 を取得します)。

<div style="text-align: center;">
    <font class="Apple-style-span" color="#606060">
        <span class="Apple-style-span" style="font-size: 14px;">
           <br/>
        </span>
    </font>
</div>

Chrome では少し異なります。

<div style="text-align: center;">
    <font color="#606060">
        <span style="font-size: 14px;">
            <br/>
        </span>
    </font>
</div>

私の知る限り、これらの要素を作成するコードは何もありませんが、表示されます。私のコードで #606060 色が言及されている唯一の場所は、バックスペースを押したときに削除される「スパン」要素に割り当てられたクラスである「白」クラスの定義の highlighting.css にあります。

ここで何らかのブラウザブードゥーが起こっているようですが、それはどういうわけかうまくいかないようです-誰かがこれに光を当てることができますか?

追伸。この Web サイトが何であるか疑問に思っている人は、ここで詳細を確認できます。

編集: いくつかのグーグル検索の後、これは webkit のバグである可能性があるように思われるため、問題は次のとおりです。

4

1 に答える 1

1

次の回避策を見つけました。これは、基本的に JQuery を使用して問題のある div とスパンを削除することを含みますが、Rangy がカーソル位置を追跡するために使用するスパンを削除しないようにします。キーアップ イベントが発生するたびにこれを行います編集可能な div:

element.find("span.highlighted,font[color],div,span:not(.rangySelectionBoundary)").replaceWith(function() {
    return $(this).contents();
});

問題は解決しましたが、実際のバグは WebKit にあるようです。

于 2012-01-26T13:59:32.323 に答える