Question

缩放悬停元素时，Windows上的Chrome 68出现问题。该代码在Linux和Mac上运行良好，但在Windows中存在一些奇怪的错误。

基本上，当元素悬停时，比例转换有效，但元素向右移动约5像素，然后又向左移动5像素。仅当应用过渡时才发生这种情况-缩放比例取决于其自身的工作。

您可以在这里看到效果：https://giphy.com/gifs/fxq1ttwyqkpszVrOF2

图像缩略图，相机图标和链接图标具有缩放效果，所有这些都会导致元素来回移动。还要注意，当图像悬停时，面板中的所有文本都会来回移动。

这是我的“屏幕截图” div代码：

.lightbox-image-link-small {
  display: flex;
  position: relative;
  justify-content: center;
  overflow: hidden;
  width: 6rem;
  background-color: #ececec;
  transition: transform .2s;
  position: relative
}

.screenshot-div {
  flex-direction: row;
  height: 7rem;
  align-items: center;
}

.add-screenshot {
  flex-basis: 15%;
  width: auto;
  font-size: 2.5rem;
  transition: transform .2s;
  border: 0;
  background-color: transparent;
}

.screenshot-container {
  flex-basis: 85%;
}

.add-issue-screenshot {
  width: auto;
  height: 6rem;
}

.screenshot-button-container {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.scroll-screenshots {
  overflow-x: auto;
  overflow-y: hidden;
}

.add-screenshot-button-div {
  height: 6.5rem;
  width: 5rem;
  align-items: center;
  z-index: 50;
  position: fixed;
}

.issue-screenshots-flex {
  margin-left: 5.15rem;
}

.view-issue-screenshot-button {
  left: 1.5rem;
}

.add-issue-screenshot {
  width: auto;
  height: 6rem;
}

.add-screenshot:hover {
  transform: scale(1.1);
  cursor: pointer;
}

.add-screenshot:focus {
  outline: 0;
}

.lightbox-image-link-small:hover {
  transform: scale(1.05);
}

还有我的CSS：

Pointer

我尝试了很多过渡/转换的组合，但它总是以相同的方式破坏。

任何帮助/想法将不胜感激！

应用CSS过渡+变换（缩放）可在过渡期间将元素从右向左移动

0 个答案: