col要素のspan属性値を変更するとIE11が強制終了する話  （第3回名古屋若手Webエンジニア交流会 2018/03/10）



# 自己紹介

* 客先常駐で、社内Webシステム（ユーザ数20人程度）を開発しているプログラマ（SIer）
     - 2018年4月より転職
* 使っている技術：Java, HTML, CSS, JavaScript(Pure), PostgreSQL, Tomcat, Servlet/JSP, Terasoluna, Spring Bootなど
* 使っていない/知らない技術：babel.js, AltJs, React.jsなど
* 社内Webシステムのサポートブラウザ：IE11, Firefox
 
[第3回名古屋若手Webエンジニア交流会(2018/03/10)](https://wakateweb-nagoya.connpass.com/event/78763/)でLTしました

-----
# IE11に悩まされていますよね！？

IE11だけ…

* [ECMAScript6の機能がほとんど使えない](https://kangax.github.io/compat-table/es6/)
* [Seleniumの環境構築が面倒](http://bitwave.showcase-tv.com/selenium%E3%81%A7internet-explorer11%E3%82%92%E5%8B%95%E3%81%8B%E3%81%99%E6%96%B9%E6%B3%95/)
* [テーブルヘッダ固定ライブラリの挙動が不安定（ヘッダがちらつく）](https://mottie.github.io/tablesorter/docs/example-widget-sticky-header.html)
* [互換モードになってレイアウトが崩れる](https://qiita.com/rico/items/09c896290e218ed2b7c3)
* [HTTP Status Codeが201だと、ファイルダウンロードができない]( https://qiita.com/yuji38kwmt/items/b369abb2dab4fff4d3ca)
* [とても遅い!](http://biz-crew.com/archives/2149)
* **col要素のspan属性を変更すると、強制終了が発生する** ← 【本日のテーマ】

などを、私は経験しました

※ 本スライドは、[過去に書いた記事](https://qiita.com/yuji38kwmt/items/d2c301a066d2f06e8521)のLT版です


-----
# col要素のspan属性を変更するとIE11が強制終了する


-----
## 実現したいこと

テーブルの列数をJavaScriptで変更したい

* 1列目はヘッダ列
* 2列目以降はデータ用の列で、列数が変わる

![image](https://qiita-image-store.s3.amazonaws.com/0/37903/b8c9dadd-0cdf-ee25-0fb3-8d81330275a8.png)


-----
### HTML, CSSのソース

```html
<table>
  <col>
  <col id="body-col" span="2" style="width:100px;"><!-- jsでspan属性値を変更する -->
  <thead>
    <tr><th>Name</th><th>2017</th><th>2018</th></tr>
  </thead>
  <tbody>
    <tr><th>Japan</th><td>1</td><td>2</td></tr>
    <tr><th>U.S.A</th><td>11</td><td>12</td></tr>
  </tbody>
</table>
```

```css
table {
    border-collapse: collapse; /* この指定に注意 */
}
table, td, th {
  border: 1px solid black;
}
th {
  background-color:gray;
}
```

-----
## jsでspan属性の値を2→1に変更する

列数を減らすため、以下のjsを実行

```js
document.getElementById("body-col").span = 1;
```

⇒ IE11で強制終了発生

<p data-height="500" data-theme-id="0" data-slug-hash="MVYQMY" data-default-tab="html,result" data-user="yuji38kwmt" data-embed-version="2" data-pen-title="col要素のspan属性値を変更" class="codepen">See the Pen <a href="https://codepen.io/yuji38kwmt/pen/MVYQMY/">col要素のspan属性値を変更</a> by yuji38kwmt (<a href="https://codepen.io/yuji38kwmt">@yuji38kwmt</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

-----
### IE11で強制終了発生


![IE11_強制終了](https://qiita-image-store.s3.amazonaws.com/0/37903/58920fae-6939-6555-7b3d-52c7b75e482f.png)

-----
## 他のブラウザで確認

| ブラウザ                              | OK/NG | 備考                                         |
|---------------------------------------|:-------:|----------------------------------------------|
| Internet Explorer 11 (11.125.16299.0) | NG    |エラーダイアログが出る                                              |
| Microsoft Edge 41.16299.248.0         | NG    | エラーダイアログは出ないが、画面が更新される |
| Google Chrome 65.0.3325.146           | OK    |                                              |
| Firefox 58.0.2                        | OK    |                                              |

※ Windows10（バージョン1709（OSビルド16299.248））で確認


-----
# IE11で強制終了するときの条件を調査


-----
## 1. span属性の変更前と変更後の値を調査

* OK：span属性が変わった
* NG：強制終了が発生した

| 変更前のspan属性値 | 変更後のspan属性値 | OK/NG |
|--------------------|--------------------|-------|
| 2                  | 1                  | NG    |
| 2                  | 3                  | OK    |
| 2                  | 10                 | OK    |
| 3                  | 1                  | NG    |
| 3                  | 2                  | NG    |
| 10                 | 9                  | NG    |

* **span属性の値を減少させると、強制終了が発生**


-----
## 2. colgroup要素で検証

```diff
@@ -1,6 +1,6 @@
 <table>
   <col>
-  <col id="body-col" span="2" style="width:100px;">
+  <colgroup id="body-colgroup" span="2" style="width:100px;"></colgroup>
   <thead>
     <tr><th>Name</th><th>2017</th><th>2018</th></tr>
   </thead>
```

```js
document.getElementById("body-colgroup").span = 1;
```

* **colgroup要素のspan属性値は、減少できた**


-----
## 3. `border-collapse: separate;`で検証

```diff
table {
-   border-collapse: collapse;
+   border-collapse: separate;
}
```

* **`border-collapse: separate`ならば、col要素のspan属性値を減少できた**



-----
## 調査結果

以下の条件をすべて満たすと、IE11では強制終了が発生した

* jsで、col要素のspan属性値を減少する（colgroup要素ではない）
* table要素のスタイルが`border-collapse: collapse`

-----
# 解決方法

col要素からcolgroup要素に変更した
理由は以下の通り

* 修正箇所が1行
* 見た目は変わらない


-----
# Microsoftにバグを報告しました（2018年1月)

[When I changed span attribute value of col element, Edge fails and reloads the page](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15308624/)

>We are not accepting feedback on Internet Explorer through this portal any longer (unless security related).

* IE11は、セキュリティ関係以外のフィードバックを受けない

>We are presently tracking this issue as a duplicate of an existing internal bug report. 

* このイシューは調査中（2018年3月時点）

Edgeはいつ修正されるのだろうか？

-----
# なんとなく思ったこと
* 値を減少させるとバグが発生するって、どういう処理なんだろうか？
* `border-collapse:collapse`の実装は複雑なんだろうか？
* ブラウザの中身ってどうなっているんだろう？誰か教えて！


-----
# 今の常駐先の話（余談）

今の常駐先のある部署では、Edgeを無効にしてIE11を使わせているらしい。「Edgeでは動かないWebシステムが多いから」という理由らしいのだが…


-----
# あなたはIE、愛せますか？