transform:scale() 使右下角的元素消失

Question

这只发生在 GOOGLE CHROME, WINDOWS 10

我正在制作一本检查用户屏幕尺寸的动画书，并使用 transform:scale() 显示尽可能大的内容。然后有一个 increases/decreases 比例因子的缩放按钮。我正在按下鼠标并移动事件，并允许用户通过拖动鼠标来滚动。该应用程序是在 Angular 的帮助下构建的。我面临的问题是，当用户缩放很多时，右下角的内容消失了。这里有直播linkhttp://bg.e-prosveta.bg/fulldemo/4iyEkxtEbY-946/40?page=11。页面结构如下：

<div class="outer-pages-wrapper" [ngStyle]="{'max-width': (containerWidth - 100) + 'px', width: ((ebook.width * ebook.scaleFactor) + (hideRight ? 0 : (ebook.width * ebook.scaleFactor))) + 'px', height: (ebook.height * ebook.wrapperScaleFactor) + 'px'}">
  <div class="inner-pages-wrapper" [ngStyle]="{transform:'scale(' + ebook.scaleFactor + ')', '-ms-transform':'scale(' + ebook.scaleFactor + ')','-webkit-transform':'scale(' + ebook.scaleFactor + ')'}">
    <app-ebook-page></app-ebook-page>
    <app-ebook-page></app-ebook-page>
  </div>
</div>

一些相关的 CSS 规则：

.outer-pages-wrapper {
  display:flex;
  overflow: hidden;
}
.inner-pages-wrapper {
  transform-origin: left top;
  -ms-transform-origin: left top;
  -webkit-transform-origin: left top;
  display:flex;
}

这是 Windows 在 Chrome 上缩放 5-6 倍后发生的情况的屏幕截图：

Answer 1

浏览器的缩放是有限制的，如果超出限制，效果会不好看。我的建议是将缩放限制在某个点，然后在达到限制时禁用缩放按钮。

要解决此问题 - 您可以将溢出设置为常见的 class 元素。

#ebook-40 .ws0 {
  overflow: auto; 
}

希望对您有所帮助。

没有溢出 -

溢出 -

Answer 2

.w2.h2 {
  overflow: visible;
}

似乎解决了这个问题。

Answer 3

只是补充一下，我遇到了类似的问题，我添加了

transform: translate3d(0,0,0)

消失的元素...似乎仍然有效的老技巧！

transform:scale() 使右下角的元素消失

transform:scale() makes elements on bottom right to disappear

javascript

css

css-transforms

angular