0

I'm having an issue with a transform rotation inside a focus selector. It works OK in Chrome, Opera and Firefox, but it does not work in Edge.

As you can see in the code snipplet when you focus on the textbox div, the icon grows and its color changes (that is done OK in all browsers), but when it comes to the rotation after the scale it does not work in Edge. I did some research and found a couple of posts that I thought were similar to my issue:

  1. CSS Animation not working in IE/Edge.
  2. CSS transform is not working in Edge.
  3. Transform scale not working after rotation.

However, I don't think any of them suit this case. Because it does the transform and the animation but only for scale so I don't think is a compatibility issue, otherwise it wouldn't do neither.

.vm-id-textbox {
  position: relative;
  order: 0;
  margin: auto 0px;

  min-width: 280px;
  width: 280px;
  height: 52px;
}

.vm-id-textbox:hover {
  cursor: pointer;
}

.vm-id-textbox:hover .textbox {
  background-color: black;

  transform: scale(1.02);
}

.vm-id-textbox:hover .edit-icon {
  color: gray;

  transform: scale(1.4);
}

.textbox {
  position: absolute;

  min-width: 280px;
  width: 280px;
  height: 52px;
  border: none;
  border-radius: 12px;

  background-color: rgba(4, 4, 66, 0.904);

  line-height: 52px;
  font-size: 15px;
  text-align: center;
  color: white;
  text-shadow: 1px 1px rgb(106, 90, 90);
  overflow: hidden;

  transition: transform 200ms ease-in;
}

.textbox[contenteditable][placeholder]:empty::after {
  content: attr(placeholder);

  opacity: 1;
  color: rgba(135, 133, 147, 0.537);
  text-shadow: none;
}

.textbox[contenteditable][placeholder]:focus::after {
  content: "";
}

.textbox:focus {
  background-color: black;

  transform: scaleX(1.02);
}

.textbox:focus + .edit-icon {
  color: gray;

  transform: scale(1.4) rotate(-360deg);
}

.edit-icon {
  position: absolute;
  margin: 17px 0px 0px 250px;

  color: white;

  transform: scale(1.2);

  transition: transform 400ms cubic-bezier(0.65, 1.33, 0.7, 1.43)
}
<script src="https://kit.fontawesome.com/d0c76ce6ff.js" crossorigin="anonymous"></script>
<div class="section vm-id">
  <div class="vm-id-textbox">
    <div class="textbox" contenteditable placeholder="Enter an ID..." oninput="togglePlaceholder();"></div>
    <i class="fas fa-edit edit-icon"></i> 
  </div>
</div>

Hope you can help me understand what I am doing wrong!

Carlos Pérez
  • 47
  • 1
  • 1
  • 9
  • I can't see the issue. Works fine for me – Aaron3219 Aug 11 '20 at 21:53
  • Which Edge version are you using? Mine is Microsoft Edge 44.18362.449.0 and HTML Microsoft EdgeHTML 18.18363. – Carlos Pérez Aug 12 '20 at 01:08
  • I am using Microsoft Edge 84.0.522.59. Seems like you are using a very old version and not even the Chromium Version of Edge, because if you would everything that works in Google Chrome also works in Edge. – Aaron3219 Aug 12 '20 at 08:13
  • The thing is, this is web page for work and I've seen a lot of folks using Edge. Since we all got the same updates they are stuck with that old version. – Carlos Pérez Aug 12 '20 at 17:06
  • The problem is that Edge scrapped its old approach and is now using Chromium as its engine. So the core is completely different. To help you someone will have to reinstall an old version of Edge which looks like a lot of time-consuming hassle to me, according to the [docs](https://learn.microsoft.com/en-us/deployedge/microsoft-edge-sysupdate-access-old-edge) at least. I suspect no one will do that. – Aaron3219 Aug 12 '20 at 20:48

0 Answers0