微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

HTML5 canvas在微信浏览器上图层问题_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:36:36
原创
1543人浏览过

用canvas在微信浏览器上写幸运大转盘，在转动时，canvas会覆盖页面表面。

转动之前的图片：


转动之后的图片：


有了解过微信浏览器雨 

Sider
Sider

多功能AI浏览器助手，帮助用户进行聊天、写作、阅读、翻译等

Sider 3159
查看详情 Sider

回复讨论(解决方案)

检查转盘的z-index、动作后的translateZ以及canvas的相关数值，看看是否有canvas的纵坐标大于转盘纵坐标的现象。

检查转盘的z-index、动作后的translateZ以及canvas的相关数值，看看是否有canvas的纵坐标大于转盘纵坐标的现象。



这个不知道如何观察，我们用safari和FF以及Chrome测试都是正常的，只有在安卓机器上的微信浏览器上才出现这个问题。手机端的微信浏览器上你说的这些该如何查看呢？

而且我们用到了安卓手机上的其他浏览器测试也是正常的，有知道这方面的原因的吗?

楼主的问题主要受到的影响就是转盘小指针被地盘挡住了对吧？？？
那么楼主主要就是检查转动的底盘的css、js、jq一类的文件。。。

不太理解问题里的 canvas 和转动 的关系

是 和canvas没直接关系  就是 css3 动画设置 canvas这个dom旋转 
还是  没用css动画   直接在canvas里面 旋转＋ draw

应该是z-index的问题吧，，，或者Postion的问题

楼主在IE6上面测试一下能正常用，基本微信浏览器就可以了（开玩笑的。。。）


建议在QQ浏览器上面试试，微信用的是QQ浏览器的内核，关于QQ浏览器是用的哪的内核我也不知道...。

楼主  你的问题 解决了吗   我也遇到了同样的问题   求帮忙

微信上面是这样的效果   

我也遇到同样的问题了。。。很郁闷。。。

大家都在看：

微信app下载
微信app下载

微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！

下载
来源：php中文网
收藏 点赞
上一篇：【自学CSS碰到的“坑”】谁才是first-child_html/css_WEB-ITnose 下一篇：两端对齐_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
掌握CSS :has() 选择器：父选择器、嵌套限制与常见陷阱解析 本文深入探讨CSS:has()伪类的正确使用方法、其嵌套限制以及与非标准选择器:contains()的区别。通过分析实际案例，我们将展示如何利用:has()实现基于子元素存在的父元素样式控制，并提供优化后的代码示例，帮助开发者避免常见错误，提升CSS选择器的编写效率和准确性。
2025-11-29 13:14:14
510
使用document.execCommand实现Web文本编辑器加粗/取消加粗 本文将指导开发者如何在Web文本编辑器中高效实现文本的加粗与取消加粗功能。针对手动DOM操作的复杂性，文章重点介绍使用document.execCommand(‘bold’)这一内置API，它能简化富文本编辑操作，实现一键切换文本加粗状态，并提供简洁的代码示例和使用注意事项，帮助开发者快速构建功能完善的文本编辑体验。
2025-11-29 13:12:07
366
Flexbox布局：实现粘性导航与底部页脚的完美结合 本教程将详细介绍如何利用CSSFlexbox布局实现一个既包含顶部粘性导航栏，又拥有固定在页面底部的页脚的网页结构。我们将通过优化min-height、flex-direction和margin-top:auto等属性，解决传统height:100%在实现此类布局时可能导致的导航滚动失效问题，确保无论内容长短，页面元素都能正确呈现。
2025-11-29 13:08:48
111
JavaScript：从子元素中批量移除特定CSS类 本教程详细介绍了如何使用JavaScript高效地从父元素下的多个子元素中移除指定的CSS类。文章首先纠正了常见的操作误区，接着深入讲解了如何结合document.querySelectorAll和forEach方法，配合classList.remove()实现批量类名管理，并演示了如何正确设置事件监听器来触发这些操作，确保代码的专业性和可维护性。
2025-11-29 13:08:02
691
优化响应式标题底部边框：CSS实现技巧与最佳实践 本文探讨如何在网页中为标题创建响应式底部边框，使其长度适中且居中显示，同时避免传统边距设置在移动设备上的布局问题。通过调整元素的宽度并利用margin:0auto;进行居中，实现跨设备兼容的视觉效果。
2025-11-29 13:06:56
189
PHP多语言网站的实现：会话管理与翻译函数优化教程 本教程详细介绍了如何构建一个健壮的PHP多语言网站。通过优化语言检测逻辑、利用会话（Session）管理用户选择的语言，并封装翻译字符串的获取与输出，本教程旨在帮助开发者避免常见的变量作用域和输出问题，实现清晰、可维护的多语言切换功能。文章将涵盖核心的语言设置函数、翻译文件结构以及前端集成方法，确保网站内容能根据用户偏好动态展示。
2025-11-29 13:06:27
142
解决CSS布局中意外顶部空白问题的教程 本教程旨在解决CSS布局中因padding-top属性设置不当导致的意外顶部空白问题。通过分析一个常见的固定宽高div内文本布局错位案例，我们将深入探讨CSS盒模型中内边距的作用，并提供具体的代码示例来演示如何通过调整padding-top值来精确控制元素内容与边框之间的距离，从而实现预期的视觉效果。
2025-11-29 13:06:14
760
解决JavaScript动态图片上传中ID重复问题：在同一页面显示多张独立图片 本教程旨在解决网页上动态上传多张图片时，因HTML元素ID重复导致图片更新异常的问题。我们将详细解释为何ID必须唯一，并提供基于HTML类（class）属性和JavaScript遍历DOM元素的解决方案，确保每个图片上传功能独立运作，实现同一页面上多张图片的正确显示与管理。
2025-11-29 13:01:21
750
优化Leaflet弹出层图片显示：条件渲染策略 本文旨在解决Leaflet地图弹出窗口中因图片链接缺失而导致的“图片损坏”图标问题。通过引入JavaScript条件渲染策略，确保仅当图片URL有效时才生成并显示标签，从而有效提升用户体验，避免不必要的视觉干扰，使地图弹出层内容呈现更加专业和清晰。
2025-11-29 12:59:01
997
JavaScript模拟悬停与点击：自动化网页动态元素交互指南 本文将详细介绍如何利用JavaScript在浏览器控制台中，通过模拟鼠标悬停事件来触发动态显示的按钮，并实现程序化点击。我们将探讨mouseover、mouseout事件的调度，结合async/await和延迟机制，实现对第三方网站动态UI元素的自动化交互，为网页自动化操作提供实用方案。
2025-11-29 12:58:02
948
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部