草庐IT

html - 在 Chrome 中滚动时具有负 z-index 问题的 Canvas

coder 2023-08-07 原文

描述

Canvas 负 z-index 存在问题。基本上，当固定位置有2个元素，一个是 block 元素，另一个是 Canvas ，并且 Canvas 的z-index为负时，无论怎样都会滚动第二个它的 z-index 是多少。

此错误仅发生在 Chrome:Mac 和 PC 上。

代码示例

这是一个 HTML 示例(简化了问题):

<ul>
    <li><span>test1</span></li>
    <li><span>test1</span></li>
    <li><span>test1</span></li>
</ul>

<div>
    <canvas />
</div>

和 CSS

html,body{
    height : 150%;
}

ul {
    position : fixed;
    z-index : -1;
    top : 0;
    left : 0;
    width : 100%;
    margin : 0;
    padding : 0;
    overflow : auto;

    li {
        float : left;
        width : 33%;
        height : 100px;
        background : red;
        position : relative;
        list-style: none;

        span{
            display:block;
            position : relative;
        }
    }
}
div {
    position : fixed;
    z-index : -2;
    top : 0;
    left : 0;

    canvas{
        opacity : 0.5
    }
}

我省略了 JavaScript，因为我确定这不是问题所在。

您可以在这个 jsFiddle 中看到正在运行的错误

一些尝试有点解决了这个问题，但我不能使用...

经过多次尝试，这里解决了当前问题，但在其他方面造成了麻烦:

  • 将 overflow:visible 设置为 ul；
    • 不知何故，这解决了问题，但我无法使用它，因为我在其上使用了 $.fn.slideDown()。在动画期间，jQuery 将 overflow 设置为 hidden，使错误在动画时可见。
  • 将 li 和 span 的 position:relative 更改为其他内容；
    • 这也行得通，可能是最佳解决方案...如果您没有内部绝对元素。我就是这种情况。我也无法使用该修复程序。
  • 在任何地方都只使用负 z-index(-2 在 canvas 上，-1 在ul);
    • 这也能正常工作，但它会把 IOS 上的所有东西都弄乱(可能还有其他设备，没有测试所有东西)。
  • 不使用负z-index；
    • 那将是最好的，但 iOS 不喜欢它。滚动时，未绘制的元素将出现在 Canvas 下方，直到滚动完成。这是一种不良行为。

最佳答案

这似乎是一个 Chromium/webkit(或闪烁)错误，这修复了它，满足您的所有标准并且不需要对 HTML 结构或其余样式进行更改:

ul {
    /* rest of the styles */
    -webkit-transform: translate3d(0,0,0);
}

演示 http://jsfiddle.net/3a66445w/2/

关于html - 在 Chrome 中滚动时具有负 z-index 问题的 Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28905146/

z-indexChromecodestronglihtmlcssgoogle-chromecanvas

有关html - 在 Chrome 中滚动时具有负 z-index 问题的 Canvas的更多相关文章

  1. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  2. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  3. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  4. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  5. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  6. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  7. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  8. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题，我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  9. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  10. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

随机推荐