我在Safari 10中看到一个可能存在于早期版本中的奇怪问题。当SVG内容与内容可编辑div一起出现在文档中时,文本正在消失。这主要发生在选择文本时,也是在切换svg内容的display属性时。以下是一些显示行为的视频:http://www.screencast.com/t/CeyFqYyfeFZW http://www.screencast.com/t/eRAGsopA
我无法公开提供该应用程序。我们有一个非常复杂的文档组合层,这可能是罪魁祸首。我稍后会尝试发布一个单独的测试。我只在Mac OS X Yosemite(10.10.05)上观察到了这个问题。 iOS似乎很好。如果有人在此之前看过这个问题,请告诉我。谢谢!
答案 0 :(得分:0)
经过一系列测试后,我发现在这个特定的例子中,问题是由可编辑文本的z-index高于image(raster或svg)的情况引起的。图像可以放在任何地方,但不能放在文本下面的几何上。此问题也特定于Safari 10+。测试9.1中的原始示例一切正常。
我创建了一个简单的示例测试z-index
https://jsfiddle.net/xngmocxm/9/
有一个背景元素,它是jpeg,它有z-index = 0,2个svg路径元素(灰色和红色),2个可编辑的文本元素和svg图像(左上角的HomeSmart)。
左文本元素的Z-index设置为30,右边的一个具有z-index 20,svg image z-index设置为25,即在两个文本元素之间。在测试浏览器中,我可以看到,在这种情况下,只有左侧文本消失,右侧显示并选择正常。
因此,文本上方的svg不会显示问题,但如果SVG低于可编辑文本,则会出现此问题。
如果图像内容是jpeg,它也会导致同样的问题:
img src
https://jsfiddle.net/xngmocxm/12/
无论如何,我能够通过将溢出设置为隐藏在有问题的图像元素的图像包装上来解决这个问题。我认为这是一个Safari bug而不是故意行为。