紙を折るようなcssで謎の線が入る

Question

http://coliss.com/articles/build-websites/operation/css/css-tutorial-folded-corner-effect.html
こちらのサイトを参考に作ったのですが、
幅を縮めり、Windowsでみると謎の線画入ってしまうようです。
cssが悪いと思い別のやり方で同じような表現をしてみたのですが、
同じく謎の線が入ってしまいます…

サイト自体の幅は960pxでそれ以下959px以下にするのこの線が出始めます。
原因が全くわからず…
ご教示よろしくお願いします。

<p class="title">タイトル</p>

.title {
  position:relative;
  width:350px;
  padding: 15px 0 13px 0;
  color:#fff;
  background: #25b2d0;
  overflow:hidden;
  font-size: 22px;
  top: 23px;
}
.title:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  border-width:0 0 10px 10px;
  border-style:solid;
  border-color:#fff #032354 #032354  #fff;
  background:#fff;
  display:block; width:0;
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

Comments

[dit.]

提示のソースだけでは再現しませんでした。ここに記載のない部分で指定されている可能性はありませんか？ブラウザのデベロッパーツールなどでも確認してください。

[MeB]

再現しませんというのは謎の線が確認できないということでしょうか？

[sousuke]

私もやってみましたがソースだけでは再現しません。

[dit.]

こちらでご確認ください。https://codepen.io/dit4410/pen/LdPBZJ

[MeB]

確認して見ましたがサイト全体960pxなのでそれ以下（959px以下）にすると出てくるようです・・・。

[sousuke]

当方windows7の32bit、GoogleChrome、FireFox、ie11でdit.氏のcodepenをウィンドウ幅を400～1200ほど変えて確認しましたがやはり左上の線は確認できません。

[dit.]

リンク先はご覧いただけましたか？提示のHTMLとCSSだけを記載した状態なので、サイト全体のサイズやウィンドウの幅など何も指定していないです。このリンク先のページにも線が出てくるのでしょうか？

[m.ts10806]

Webページの確認は「Windowsでみると」というのは環境提示とはなりません。ブラウザの種類とバージョンをご提示ください。

[m.ts10806]

ちなみに私のほうはChrome、IE11で再現しませんでした。

[dit.]

他のCSS記述でpタグにborderとかbox-shadowとか何か指定されてませんか？確認願います。

[MeB]

すみません。開発ツール（chrome）のスマホシュミレーター？でのみ入る現象のようでした…。普通に見るぶんには表示されないようです。

[defghi1977]

であれば, 実用上問題のないChromeのバグということで開発元に報告しましょう. ヘルプ→問題の報告でいけます.
(Linux版でも再現しましたのでレンダリングエンジン固有の問題でしょう)

Answer 1

開発ツール（chrome）のスマホシュミレーター？でのみ入る現象のようでした…。普通に見るぶんには表示されないようです。

Linux版でも再現しましたのでレンダリングエンジン固有の問題でしょう
という方もいらしたので…

Answer 2

Safari、Google Chrome、FireFoxで確認しましたが、
左上のへんなのはでませんね・・・。
ブラウザっぽいですね。
使用ブラウザも記載していただけないでしょうか？
（おそらくIEだとは思いますが・・・。）