CSS/DHTMLバグ辞典スレッド【第5版】
>>620修正
>body {'MS PMincho'}
body {font-family: 'MS PMincho';} >>551
>>551-553 報告のChrome30でのCSSバグは
マイナー極まるブラウザ、Falkon Version 3.1.0 でも再現する。
hrtps://falkon.org
2022年1月に出たヴァージョン3.2.0が最新だが、Windows向けには3.1.0までしか配布されてないので未見。
ウィキペディア曰く「Qt WebEngineから提供されるChromiumエンジンを使用」ってことだけど、
つまりBlinkに移行する以前のChromeに近いのか? FalkonはWebkit系なのか?
するとWebkitの親玉Safariでも、同じバグが起きてるのかしらん。
「AppleはiOS上で動作するブラウザについて、たとえFirefoxやChromeであっても、ブラウザのレンダリングエンジンにはAppleが開発したWebKitを使うことを強制しています」
tps://news.livedoor.com/article/detail/22408540/
とすると、iPhoneではSafari以外のブラウザでもWebKit特有の問題が発生するのかも。 >>622
Falkonのバグ対策(の失敗)について。
>>551の例で実験。
/* WebKit HackでGoogleChrome30とSafari5とOpera15+対策 */
@media screen and (-webkit-min-device-pixel-ratio:0){
.navbar a {white-space:pre-wrap;}
} /* Falkonにも効く。 */
@-moz-document url-prefix() {/* Firefoxで元の指定に戻す */
.navbar a {white-space:nowrap;}
} /* Falkonには無効、ここまでバグ発生せず。 */
/* Chrome39+ハックで新Chromeや新Edgeも元の指定に戻す */
_:lang(x)::-internal-media-controls-overlay-cast-button, .navbar a {
white-space:nowrap;
} /* 新ChromeだけでなくFalkonにも効いてしまった! バグが再生。 */ >>622
>>551のバグは、Falkon3.1では、下記を追記すると発生しなくなった。
@media screen and (-webkit-min-device-pixel-ratio:0){
.navbar a {display:inline-block;}
}
要は、折返し禁止(white-space:nowrap;)にするa要素をインラインブロックとして扱ったら、まともにレンダリングしてくれるみたい。
上記WebKitハックによるスタイル指定は、GoogleChrome最新版(バージョン: 108.0.5359.125)でも適用されるものの、指定しない時と比べて特に変化は起きない模様。 >>622
CSSではないけど、そもそもFalkonは行中での折返し(改行)をするアルゴリズムが何かヘン。
非表示のゼロ幅スペース(​ U+200B)を挟んでも、そこで折り返してくれない。
HTMLソースで改行してあると、そこがブラウザ表示でも改行できる位置になる。
ちなみにゼロ幅スペースを入れた直後にソースで改行すると、
ChromeやFirefoxと違ってFalkonの表示ではドット一箇分ほどの幅の隙間が空く。ゼロ幅にならない!
<wbr>タグには対応してるから、そっちを使用すればいいのかもしれんが。 >>626
↓こんなソースで比較してみると。
<h1><a href="">■</a>大見出し1</h1>
<h1><a href="">■</a>
大見出し2</h1>
<h1><a href="">■</a>​
大見出し3</h1>
Chrome108/Firefox108での表示
■大見出し1
■ 大見出し2 ←■の後に一文字の三分の一程の幅のスペースが空く。
■大見出し3 ←前行末にゼロ幅スペースがあるとソース改行による空白が打ち消される。
Falkon3.1.0での表示
■大見出し1
■ 大見出し2 ←■の後に一文字の三分の一程の幅のスペースが空く。
■ 大見出し3 ←前行末にゼロ幅スペースがあってもソース改行による空白が打ち消されない。