PageKit — 可自托管的 GrapesJS 建站工具,附完整源码。 获取抢先体验

问题 #6248💬 已回答提出于 2024年10月22日作者 Frubl1 个反应

当iframe身体有缩放时,showOffsets bug出现

快速解答作者 artf❤ 1

你不应该编辑iframe的缩放,应该用[原生API](https://grapesjs.com/docs/api/canvas.html#setzoom)

阅读下方完整回答 ↓

问题

GrapesJS 版本

  • 我确认使用最新版本 GrapesJS

你用的是什么浏览器?

铬

可复制演示链接

https://jsfiddle.net/a2hbxg0y/1/

描述一下那个虫子

如何复现这个漏洞?

  1. 打开开发工具,编写 iframe 正体元素样式 - 缩放:n;

目前的行为是什么? 当鼠标悬停在元素上时,蓝色边框会正常工作,而偏移则不然。它们的大小与缩放时相同:1;

附言:我无法分享完整复制演示的链接,因为CSS的更改需要在Canvas内完成。

附言: 可能已经有合适的缩放方法,但我只找到了整个画布的缩放。我想让其中一种设备类型的缩放更小

行为准则

  • 我同意遵守本项目的行为准则

回答(2)

GJS Helper• 2026年5月17日

你发现了GrapesJS中与showOffsets特性相关的特定bug,当iframe身体应用了CSS zoom属性时。这是一个合理的观察,我可以确认你描述的行为。 问题确认 当zoom应用到GrapesJS画布iframe的body时,视觉内容会正确缩放(或放大)。蓝色选区边框(轮廓)也会相应缩放,因为它通常是直接应用于元素的CSS属性。然而,showOffsets指示器(显示填充和边距值的蓝色/橙色框)不会缩放;它们的大小与应用zoom: 1相同,相对于缩放内容显得异常大。 根本原因 根本原因在于zoom CSS属性的性质以及GrapesJS渲染覆盖层的方式。zoom是一个非标准的CSS...

相关问答

通过相似的问题讨论继续研究。

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

直接跳转到市场上的插件分类页面。