Ie11 Triggers CSS Transition on Page Load When Non-Applied Media Query Exists

CSS is broken in IE11 until Developer Tools are opened

Since the issue was with media queries, I searched and found another answer to a similar question. Seemed to be my case: one of the symptoms was that lowest resolution media query was acting.

Answer: https://stackoverflow.com/a/25850649/171278

Solution: the lowest resolution media query should also have min-width, just add min-width: 1px, and it won't be activated on page load.

@media only screen and (min-width:1px) and (max-width:800px)

Transitions run slower on first use in IE

I suspect that it runs slowly the first time due to initial page load. There may be other processes running that may slow the transition down too. The second time will be smoother because resources have been cached and performance isn't hampered. I would run your site through https://developers.google.com/speed/pagespeed/?hl=en to find any render-blocking scripts that may be hampering performance.

Also see this article to identify which properties can be animated cheaply.
http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

Transition starting on page load for some reason

I solved the issue, been going through google for answers. The solution is to add <script> </script> opening and closing tags in the html file separated by space. Apparently its a bug in the browsers mentioned before.

How can I work around this IE11 layout bug related to table-cell, text-decoration, and padding?

Again a IE11 problem that seems so unusual. I see that the percentage padding is not even calculated and is not applied in the layout. However the text is still padded according to the padding percentage. So i would assume the text is positioned with the padding but after the positioning the percentage padding is "disabled".

I can't tell you why this happens. But if you really want to fix these you might want to use these quick fixes.

---

Use margin

Because the percentage bug only occurs on the padding of a table-cell, you can actually use a margin on the span itself.

span 
{
    margin-left: 10%;
}

and ofcourse reset the padding of the sides:

div.table-cell {
    display: table-cell;
    padding: 20px 0;
}

This "solution" is not as dynamic as with percentage padding on the table-cell itself.

Why not?

It's because the percentage takes is value from it's parent element, the table-cell. Where as the table-cell did take it's percentage value based on the tabel. Now when you would just use left-margin: 5%;. It would be half of the space as it should be. This is because it take the 10% on the table-cell width. Where the table-cell width is table width devided by its cells(table width / table cell).

So to fix that i did 5 times the amount of cells (5 * 2 in this case), which would result in the right percentage.

However this is not dynamic when you want to add more cells.

jsFiddle

---

Use border

Use border which its position is "reserved" before the padding is resetted.

Reserved border

span 
{
     border-bottom: 1px solid transparent;   
}

Change property that doesn't need re-calculation of position; color

div.table-cell-bug:hover span 
{
    border-bottom-color: black; 
}

Now note that there will still be no padding in the layout. As soon as a property is assigned which has not been calculated before the padding did reset(the same time the text position is determed) the positions will be re-calculated.

jsFiddle

---

I hope one of these quick fixes work for you.

I see you sended a bug report to MS. Keep us up-to-date when you get a reply, i would appreciate it :)

---

Related Topics