css fallback for IE(11+)

css, ie

我也不知道我當初為什麼會硬著頭皮寫英文的，反正就是英文的了哈哈哈

1. grayscale

1
2
-webkit-filter:grayscale(100%);
filter:grayscale(100%);
  • use javascript. see tutorial here.
  • or just simply use picture in gray. (haha)

2. object-fit / object-position

1
2
3
4
-o-object-fit:cover;
   object-fit:cover;
-o-object-position:center;
   object-position:center;
  • IE doesn’t support object-fit after IE10,
    so use background-size and background-position instead.

3. vertical centering with css translate

As the question asked here,
when using css translate to center contents,
after scrolling the webpage, IE would somehow translate dom elements in the way that were not expected.

This is what i encountered:

The original page looks like this.

After scrolling to other section(with jquery), the first section was “moved up”.

The html and css:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- the first section in the picture -->
<div class="page" id="first-section">
    <div class="page-content">
    <!--  some contents here  -->
    </div>
</div>
<!-- some other sections -->
<div class="page">
    <div class="page-content" id="other-section">
    <!--  some contents here  -->
    </div>
</div>
...

1
2
3
4
5
6
7
8
9
10
11
.page {
    height: 100vh;
    min-height: 850px;
}
.page-content {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

I found out it’s the css in .page-content that caused the unexpected translation (in IE only of course),
so after using bottom and right instead of top and right as suggested,
everything works fine magically again!

1
2
3
4
5
6
7
8
/* this works in IE (and all other browsers) */
.page-content {
    position: absolute;
    bottom: 50%; 
    right: 50%;
    transform: translate(50%,50%);
    -webkit-transform: translate(50%,50%);
}

Guess this is just some kind of bug in IE, since this doesn’t happen in other browsers. Stupid IE.