首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Safari中,将鼠标悬停在SVG元素上会导致滚动元素重置其滚动位置?

在Safari中,将鼠标悬停在SVG元素上会导致滚动元素重置其滚动位置。这是由于Safari浏览器对SVG元素的滚动行为的处理方式与其他浏览器存在差异所导致的。

具体而言,当鼠标悬停在SVG元素上时,Safari浏览器会将其滚动元素(通常是包含SVG元素的父元素)重置回顶部位置。这种行为可能会对页面的用户体验造成影响,特别是在包含大量SVG元素的页面中。

为了解决这个问题,可以考虑以下几种方法:

  1. 使用JavaScript代码来监听鼠标悬停事件,并且在事件触发时保存当前滚动位置。当鼠标移开SVG元素时,再将滚动位置还原回去。
  2. 将SVG元素嵌套在一个容器元素中,并设置该容器元素为可滚动的。这样,当鼠标悬停在SVG元素上时,只会触发容器元素的滚动,而不会导致滚动元素重置位置。
  3. 将SVG元素转换为静态图像(如PNG或JPEG格式),以避免使用SVG元素引起的滚动问题。

请注意,以上方法仅适用于解决在Safari浏览器中鼠标悬停在SVG元素上导致滚动元素重置滚动位置的问题,并不涉及云计算、IT互联网领域的专业知识。对于云计算领域的问题,可以参考相关文档和技术资料,如腾讯云官方文档、开发者社区等,以获取更专业的解答和建议。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

「译」前端项目中常见的 CSS 问题

重置 button 和 input 元素的背景 添加按钮时,重置它的背景,否则在跨浏览器时它的呈现会有所不同。... macOS 下的 Chrome ,这看起来不错,但是 Windows 下的 Chrome 滚动条始终存在(即使内容很短)。这是因为 scroll-y 会无视内容,一直显示滚动条。...当视窗高度不足时元素固定在屏幕顶部 如果你视窗不够高的时候一个元素固定在屏幕顶部,会发生什么事呢?...使用它们的时候,开发者可能会忘记做下面的事情: 添加 content: "" 属性, 没有定义 display 属性的情况下设置它们的 width 和 height 下面的例子,我们有一个标题,标记是一个伪元素...水平滚动条 有些元素的宽度可能会导致出现一个水平滚动条。 要找到问题的根源,最简单的方法就是使用 CSS outline。Addy Osmani 写了一个方便的脚本 。

2.1K10
  • 动手练一练,手写一个价格对比、固定表头滚动的表格

    今天我们通过一个界面十分漂亮功能价格对比的表格,展示固定表头的功能,实例操作展示如视频所示,当滚动滚动至表格位置,添加表头固定样式,当滚动至表格底部,移除固定表头样式。...scrollHeight: 因为子元素比父元素高,父元素不想被子元素撑的一样高就显示出了滚动条,滚动的过程元素有部分被隐藏了,scrollHeight代表包括当前不可见部分的元素的高度。...在有滚动条时讨论scrollHeight才有意义,没有滚动条时scrollHeight==clientHeight恒成立。单位px,只读元素。...scrollTop: 代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。没有滚动条时scrollTop==0恒成立。单位px,可读可设置。...如果滚动到表格区域,获取重置后的表头宽度。 接下来我们来判断第三部分内容区域距离视口顶部的高度是否大于表头的高度。

    3.2K31

    前端高性能滚动 scroll 及页面渲染优化

    如果事件涉及到大量的位置计算、DOM 操作、元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成,就会造成浏览器掉帧。...对于有位置重叠的元素的页面,这个过程尤其重要,因为一旦图层的合并顺序出错,将会导致元素显示异常。...但是从本质上而言,我们应该尽量去精简 scroll 事件的 handler ,一些变量的初始化、不依赖于滚动位置变化的计算等都应当在 scroll 事件外提前就绪。...建议如下: 避免scroll 事件修改样式属性 / 样式操作从 scroll 事件剥离 ?...pointer-events: none 可用来提高滚动时的帧频。的确,当滚动时,鼠标悬停在某些元素上,则触发上的 hover 效果,然而这些影响通常不被用户注意,并多半导致滚动出现问题。

    2.6K30

    CSS 关于 Overflow ,你需要了解的这些知识点!

    作者:Ahmad shaded 译者:前端小智 来源:sitepoint CSS,当一个元素的内容太大而无法容纳时,我们可以对进行控制。...水平滚动问题 通常,我们会遇到水平滚动的问题,当原因未知时,滚动滚动会变得更加困难。 本节,我列出水平滚动的一些常见原因,以便大家以后构建布局时可以想到到它们。...当left,right值的一个元素定位在body元素外部时,可能会发生这种情况 ? 要解决这个问题,首先需要检查为什么这个元素被放置viewport之外。...一个简单的解决方法是grid-template-columns重置为1fr,并在视口较大时对进行更改。...Firefox scroll标签 Firefox,会向导致水平滚动元素添加一个小标签。 ? 删除元素 有时,上述技术无效。

    4.6K20

    【网页前端】CSS样式表进阶之图像的灵活使用与拓展知识

    1.2.2 步骤解析 1 、精灵图上,找到要使用的图片,测量宽高 2、以 div 为例,为设置和图片相同的宽高(加边框仅为了方便演示) 3、通过背景图片引入,不能重复 4、因为现在显示的背景图默认为左上角...1.3 字体图标 1.3.1 引言&概念 精灵图虽然可以提高页面加载效率,但是精灵图同样也存在问题: 1 、 图片放大失真 2 、 图片过大,加载速度过慢,导致网页加载初期看不到任何图像....svg ) 格式 .svg 字体是基于 SVG 字体渲染的一种格式,支持这种字体的浏览器有 Chrome4+ 、 Safari3.1+ 、 Opera10.0+ 、 iOS...格式: text-shadow : X 轴偏移 Y 轴偏移 模糊程度 阴影颜色 ; text-shadow: 5px 5px 5px #FF0000; 2.2 元素变成圆形 元素可以表现形式上通过...0%~50% 之间是圆角四边形 2 、占用的标准流位置仍为四边形 示例代码: 2.3 截图整个网站 1 、先把滚动条拉倒网页最底部 2 、页面上,鼠标右键,“检查”

    1.5K40

    【前端性能】高性能滚动 scroll 及页面渲染优化

    如果事件涉及到大量的位置计算、DOM 操作、元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成,就会造成浏览器掉帧。...对于有位置重叠的元素的页面,这个过程尤其重要,因为一旦图层的合并顺序出错,将会导致元素显示异常。...但是从本质上而言,我们应该尽量去精简 scroll 事件的 handler ,一些变量的初始化、不依赖于滚动位置变化的计算等都应当在 scroll 事件外提前就绪。...建议如下: 避免scroll 事件修改样式属性 / 样式操作从 scroll 事件剥离 ?...pointer-events: none 可用来提高滚动时的帧频。的确,当滚动时,鼠标悬停在某些元素上,则触发上的 hover 效果,然而这些影响通常不被用户注意,并多半导致滚动出现问题。

    2K70

    CSS深入理解学习笔记之overflow

    也会导致scrollHeight值不一样。 ? 滚动条的宽度机制:     滚动条会占用容器的可用宽度或高度。 ?...原因:绝对定位元素不总是被父级overflow属性裁剪,尤其当overflow就对定位元素及其包含块(含position:relative/absolute/fixed声明的父级元素,没有则是body...);ⅱoverflow子元素transform(支持IE9+/FireFox/Chrome/Safari/Opera)   overflow失效妙用:     菜单栏固定显示。...锚点定位:通过锚链定位锚点位置。   (2)锚点定位的本质     页面可滚动容器,通过锚链滚动对应的锚点元素,即改变容器的滚动高度。     前提:①容器可滚动;②锚点元素容器内。   ...(3)锚点定位的触发     ①url地址的锚链与锚点元素;     ②可focus的锚点元素处于focus状态;   (4)锚点定位的作用     ①快速定位     ②选项卡技术     ③单页应用

    4.1K50

    移动Web学习笔记

    , iPad上的safari浏览器中有个网站添加到主屏幕上的按钮,当网站设置了rel=”apple-touch-icon属性,当网站添加到屏幕上,屏幕上会显示网站的图标点击此处查看详细解释 6....-webkit-overflow-scrolling: touch 解释:-webkit-overflow-scrolling属性用于控制元素移动设备上是否使用滚动回弹效果,其中touch表示使用具有回弹效果的滚动...移动设备开发过程我们通常会对文本框定义为宽度100%,将其定义为块级元素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为添加一个特殊的样式...,则该元素的行高为 16px X 2em = 32px 13. rem 解释:rem是CSS3新引进的一个度量单位,数值表示根节点(html标签)的字体大小的倍数,在当前的所有主流浏览器根节点(...) ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb) ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置

    1K30

    用最少的代码却实现了最牛逼的滚动动画!

    我们需要知道ScrollTrigger是基于GSAP实现的插件,ScrollTrigger是处理滚动事件的,而真正处理动画是GSAP,二者组合使用才能实现滚动动画~ 插件特点 任何动画链接到特定元素,...可以进入/离开定义的区域或将其直接链接到滚动栏时动画上执行操作(播放、暂停、恢复、重新启动、反转、完成、重置)。 延迟动画和滚动条之间的同步。 根据速度捕捉动画中的进度值。...嵌入滚动直接触发到任何 GSAP 动画(包括时间线)或创建独立实例,并利用丰富的回调系统做任何您想做的事。 高级固定功能可以某些滚动位置之间锁定一个元素。 灵活定义滚动位置。 支持垂直或水平滚动。...当窗口调整大小时,自动重新计算位置开发过程启用视觉标记,以准确查看开始/结束/触发点的位置。...滚动记录器处于活动状态时,如active类添加到触发元素:toggleClass: "active" 使用 matchMedia() 标准媒体查询为各种屏幕尺寸创建不同的设置。

    2.6K20

    【移动端bug】iOS 下 Input 和 fixed 的问题

    1什么时候会出现 我就列出出现这些问题的包含的元素 ios11 safari 浏览器 定位元素中有输入框 定位元素输入框激活时,页面还有很多内容,仍然能往上滚动 来看一下实际的表现是怎么样的 ?...2探索一下原因 正如我上面说,只有定位元素的输入框被激活时,页面仍有很多内容,仍能往上滚的时候,才出现光标错位的问题 那么 首先,观察一哈这个光标错位时的位置 好像是键盘没有唤起时,定位元素输入框的位置啊...先获取并保存到当前页面滚动高度 给 html 设置 fixed 的时候,把 top 设置成保存的滚动高度 html 重置的时候,再使用 scrollTop 滚到相应位置 具体如下 function BodyScroll...(0) 直接滚动到顶,从而复位但是这样带来的问题就是体验不好,用户丢失了浏览高度 所以打算是 1、输入框激活时,保存页面浏览的高度 2、输入框失焦时,获取保存的浏览高度,然后滚动到相应的位置 3、输入框失焦聚焦时要进行防抖处理...isIOS) { return () => {}; } // 只有 IOS13 才 滚动回原来位置 const timer = debounce

    4.6K61

    用最少的代码却实现了最牛逼的滚动动画!

    我们需要知道ScrollTrigger是基于GSAP实现的插件,ScrollTrigger是处理滚动事件的,而真正处理动画是GSAP,二者组合使用才能实现滚动动画~插件特点将任何动画链接到特定元素,以便它仅在视图中显示该元素时才执行该动画...可以进入/离开定义的区域或将其直接链接到滚动栏时动画上执行操作(播放、暂停、恢复、重新启动、反转、完成、重置)。延迟动画和滚动条之间的同步。根据速度捕捉动画中的进度值。...嵌入滚动直接触发到任何 GSAP 动画(包括时间线)或创建独立实例,并利用丰富的回调系统做任何您想做的事。高级固定功能可以某些滚动位置之间锁定一个元素。灵活定义滚动位置。支持垂直或水平滚动。...当窗口调整大小时,自动重新计算位置开发过程启用视觉标记,以准确查看开始/结束/触发点的位置。...滚动记录器处于活动状态时,如active类添加到触发元素:toggleClass: "active"使用 matchMedia() 标准媒体查询为各种屏幕尺寸创建不同的设置。

    3K00

    挥别web移动端开发差异和经典坑

    web移动端 电话号码识别差异 iOS Safari (其他浏览器和 Android 均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比如: 7 位数字,形如:1234567 带括号及加号的数字...内部元素超出 body 即产生滚动,超出的部分 body 隐藏。...body { overflow-y: hidden; } .wrapper { overflow-y: auto; } MDN定义: -webkit-overflow-scrolling 属性控制元素移动设备上是否使用滚动回弹效果...如果该元素已经浏览器窗口的可见区域内,则不会发生滚动。...经排查,原因如下: 原来是缓存导致的,因其#号后的参数等都被忽略,那么#以前的URL授权前和授权后一致,不再发送网页请求去重新获取而是直接读取缓存。

    2.9K20
    领券