3

昨日からこのツールチップ ライブラリで作業しています。この問題が睡眠の問題なのか何なのかはわかりませんが、何が起こっているのかわかりません。

このツールチップ ライブラリに関する基本的な考え方は単純です。ユーザーは、ツールチップに表示したいメッセージを含むカスタム データ属性(つまり ) を任意の HTML 要素に追加すると、それが表示される必要があります。data-ツールチップの向きや、ユーザーがツールチップ内の単語を「カット」したい場合など、追加するオプションがいくつかあります。

次に例を示します。

<div data-msg="Hi, I'm a tooltip with a text veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery large" data-orient="right" data-break="yes">Hover me and the tooltip will show!</div>

下、右、左の向きはすべて問題ありませんが、上向きを追加すると、ブラウザーはツールチップの下部に一種の「境界線」を追加します。. 理由はわかりませんが、修正できません。

他の方向では問題が発生しないため、奇妙です。

下の画像で問題を確認できます (最初のツールdata-orient="top"チップにはdata-orient="right".

ここに画像の説明を入力

この問題を解決する方法を誰かが知っている場合は、何が起こるか説明したいと思います。

これがフィドルです。

ありがとう、レオ！

編集: Chrome 28 バージョンで作業しており、OS は Windows 7 です。

4

1 に答える 1

2

これは回避策であり、実際の解決策ではありません。ただし、この場合、重大な副作用はありません (ただし、保証はありません。以下を参照してください)。そして、これ以外の説明はほとんどありませんが、これは Chrome レンダリングのバグのようです。

これを に追加[data-msg]::before:

-webkit-backface-visibility: hidden;

backface-visibility は、実際には 3D 変換に関係しているにもかかわらず、かなりの数の Chrome レンダリング バグを修正する傾向があります。このケースも修正されているようです。

問題が修正される理由は、要素に 3D 変換に関係するものを追加した瞬間に、別の (ハードウェア アクセラレーションされた) トランジション エンジンを使用する Chrome に関係している可能性があります。これによりパフォーマンスが低下する可能性があり、問題が発生した場合に少なくともパフォーマンスを向上させるために使用される別の無意味なルールにつながります。

-webkit-transform: translate3d(0,0,0);

ETA: -webkit-transform問題を解決するには、実際にはそれだけで十分なようです。この 2 つを試して、いずれかが他の問題を引き起こすかどうかを確認してください。

iOSのクラッシュが報告-webkit-backface-visibilityされています。そのため、そこでテストして、translate3d代わりに試してみてください。または、特に iOS で修正を無効にしてください (バグが表示された場合は、そのままにしておいてください)。

コメントに投稿されているように、問題のより最小限の例を次に示します-失敗することもありますが...失敗しますが、ほとんどの場合、下部に不要な暗い境界線が表示されます:

JSFiddle

このバグは、 と を組み合わせた s が原因のtransitionようです。おそらくバグにも影響がありますが、それらを削除すると境界線が修正される場合と修正されない場合があります。回避策がより一貫していることを願っています。border-radiusopacity inline-blockpaddingbackface-visibility

于 2013-07-14T22:26:55.697 に答える