-1

Hi i am doing an image gallery where hover the thumbnails, text will appear. It is correct in firefox and chrome but seems to have issues in IE11.

Also the fonts and its colours are different too.

.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
width: 100%;
height: 100%;
-webkit-transform: translate(-50%,-50%);
 }

 .text {
 background-color: rgba(183, 191, 183, 0.65);
 color: white;
 font-size: 16px;
 width:100%;
 height:100%;
 padding-top:45%;
 padding-left:2%;
}

This is the correct one in chrome and firefox

IE 11 - wrong

imja86
  • 39
  • 1
  • 4
  • caniuse.com/#search=transform . a simple google search will give you your answer Possible duplicate of [CSS transform not working IE](https://stackoverflow.com/questions/18969621/css-transform-not-working-ie) – Mihai T May 23 '17 at 11:21
  • i removed the -ms- prefixed and now have transform: translate(-50%, -50%); transition: .5s ease; but still not working in IE – imja86 May 25 '17 at 03:02
  • if you read carefuly . -ms- prefix is for IE9 , IE10 and newer ( 11 and edge ) do not need prefix . but BELOW IE9 ( ie8,7 etc ) transform DOES NOT work – Mihai T May 25 '17 at 07:24
  • I am using IE11. so i do no need -ms- prefix . I never said anything below IE9. transform: translate(-50%, -50%); <-- this does not have any prefix, still why doesnt it work for IE 11? – imja86 May 25 '17 at 07:38
  • Questions seeking help ("**why isn't, or how to make, this code working?**") must include the desired behavior, a _specific problem or error and the shortest code necessary_ to reproduce it **in the question itself**. Questions without **a clear problem statement** are not useful to other readers. See: [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). – Asons May 26 '17 at 16:39

2 Answers2

1

for those who come to this question. The OP shared his website in a previous question and there, all the above styles are inside a @media not all, (-webkit-transform-3d) . so.

as i said in a previous answer to one of your questions .

@media(-webkit-transform-3d) indicates whether 3d transforms are supported or not and this is a NON STANDARD as MDN states

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. -webkit-transform-3d is a non-standard boolean CSS media feature whose value indicates whether vendor-prefixed CSS 3D transforms are supported or not. This media feature is only supported by WebKit and Blink. The standards-based alternative is to use a @supports feature query instead.

and, as stated in MDN, it is NOT supported in IE at all . you should use @supports . so the problem is not with the styles but with the media condition

@supports {

<group-rule-body>

}

See DOCs here > @media MDN -webkit-transform3d

Mihai T
  • 17,254
  • 2
  • 23
  • 32
  • While this might answer the question, linked resources is no good to base answer upon, and even worse when it comes from another question. As soon as that link dies so will the value of this answer and question. I suggest you wait and post answers until there is a proper written question. – Asons May 26 '17 at 16:42
  • hello. i explained at the begining of my answer what part of the op's code ( which was not posted in his question but it.s only on his website ) was causing the problem and on which my answer was based upon. i did this to make sure everyone understood what was the problem on thus why i posted this solution – Mihai T May 26 '17 at 19:18
  • @MihaiT thanks for the answer, it's definitely useful to have it here, because that is the root of the problem. Maybe you should write a new, better question and then answer it yourself? – chasmani Dec 12 '17 at 17:18
0

Add transform as an attribute like this

var element = querySelector(".middle") element.setAttribute("transform","translate("-50, -50")"

Kingsley
  • 63
  • 7