CSS Safari / mobile - Translate and min-height

Question

I have site , which is fine on Chrome, Firefox and IE but on Safari (Win version) it does weird things.

First of all min-height of image is not working, even if it should be supported and I've got some troubles with positioning to vertical center.

.carousel .item img {
    max-height: 50vh;
    min-height: 200px;  
    margin: auto;
}

.ommo-main {
  position: relative;
  height: 50vh;
}
.ommo-text {
  position: absolute;
  top: 65%;
  -webkit-transform: translate(0%,-65%);
    -ms-transform:: translate(0%,-65%);
    -webkit: translate(0%,-65%);
    -moz-transform:: translate(0%,-65%);
    -o-transform: translate(0%,-65%);
    -webkit-transform: -webkit-translate(0%,-65%);
    transform: translateY(-65%);
}

All code in bootply HERE .

And in mobile phone, one of my as easy as possible browsers (Javelin, Xiaomi Redmi 2), I've got this issue , but not sure if it's not just a cache.

Could anybody help me, please? Thanks a lot in advance.

Answer 1

问题是Windows上的Safari，它不支持VH和VW单元，在MAC OS X上运行良好。