webkit 相关问题

WebKit是一个开源的Web内容引擎，适用于浏览器和其他应用程序，如Apple Safari，Mail，App Store和一些移动浏览器，包括Android，iOS，RIM Blackberry，Symbian和WebOS的预安装浏览器。

webkit-backdrop-filter 在 React.js 中不起作用

我正在 React 网站上工作，尝试向具有一段文本的容器添加模糊效果。无论出于何种原因，模糊都不会显示。我不明白为什么。任何帮助都会很棒！ HTML：我正在 React 网站上工作，尝试向具有一段文本的容器添加模糊效果。无论出于何种原因，模糊都不会显示。我不明白为什么。任何帮助都会很棒！ HTML： <div className={styles.CardContentContainer}> <div className={styles.ProjectTitle1}> <span>Real Estate</span> </div> ... CSS： .ProjectTitle1 { padding-right: 9px; padding-left: 9px; padding-bottom: 4px; padding-top: 4px; color: white; font-weight: 700; z-index: 1; position: absolute; top: -84px; right: 0px; background-color: #aa1a18; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--main-top-shadow); box-shadow: var(--main-shadow); } 实际上这不是React问题，请注意，background-filter属性充当背景，所以如果你为元素添加背景颜色，看到的将是颜色，你不会注意到模糊效果。但如果你想使用背景颜色，你应该做的是使用较低的不透明度百分比。您可以将以下示例视为我要解释的内容的参考。 <!DOCTYPE html> <html lang="en"> <style> .ProjectTitle1 { padding-right: 9px; padding-left: 9px; padding-bottom: 4px; padding-top: 4px; color: white; font-weight: 700; z-index: 1; position: absolute; top: 10px; left: 30px; background-color: #aa1a18; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--main-top-shadow); box-shadow: var(--main-shadow); } /* without the background color */ .ProjectTitle1-noBGColor { padding-right: 9px; padding-left: 9px; padding-bottom: 4px; padding-top: 4px; color: white; font-weight: 700; z-index: 1; position: absolute; top:40px; left: 30px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--main-top-shadow); box-shadow: var(--main-shadow); } /* background color with low opacity */ .ProjectTitle1-BGColorOpacity { padding-right: 9px; padding-left: 9px; padding-bottom: 4px; padding-top: 4px; color: white; font-weight: 700; z-index: 1; position: absolute; top: 70px; left: 30px; backdrop-filter: blur(20px); background-color: rgba(255,255,255,0.1); -webkit-backdrop-filter: blur(20px); box-shadow: var(--main-top-shadow); box-shadow: var(--main-shadow); } </style> <body> <div class="container"> <img src="https://picsum.photos/200/300" width="230px" height="250px"> <div class="ProjectTitle1"> <span>Real Estate</span> </div> <div class="ProjectTitle1-noBGColor"> <span>Real Estate</span> </div> <div class="ProjectTitle1-BGColorOpacity"> <span>Real Estate</span> </div> </div> </body> </html>

css reactjs webkit blur

回答 1 投票 0

Chrome 表单处理问题：输入 onfocus="this.select()"

当用户单击表单字段时，我使用以下 HTML 代码自动选择表单字段中的某些文本：这在 Fi 中运行良好...

html forms google-chrome webkit

回答 11 投票 0

`text-align: justify`是否均匀拉伸所有空白字符？

Unicode 标准中除了通常的空格和不间断空格之外还有几个水平空白字符。我尝试将其中一些与 text-align: justify 一起使用，在我看来......

css webkit typography gecko blink

回答 3 投票 0

禁用弹性滚动 Chrome/Safari

这个方法对我来说根本不起作用。有没有更新的现代方法可以做到这一点？我的客户总是讨厌它，而且我还没有找到禁用它的好方法。我所说的弹性滚动是指一次...

google-chrome safari webkit

回答 4 投票 0

CSS 滤镜阴影在 Safari 浏览器中悬停时看起来不同，如何解决？

我用滤镜阴影设置了悬停按钮的样式，如下所示： -webkit-filter: drop-shadow(0 0 0px rgba(0, 0, 0, 0)); 过渡：变换 0.6 秒缓入输出，过滤 0.8 秒缓入输出；变换：翻译...

css reactjs safari webkit shadow

回答 0 投票 0

在 webkit 滚动条和屏幕边缘之间放置一些空间

我有这个 css 代码，可以制作 webkit 滚动条。 ::-webkit-滚动条 { 宽度：8px；高度：8px； } 这将创建一个紧邻屏幕边缘的滚动条。有什么办法吗...

css webkit scrollbar

回答 4 投票 0

使用任何动画/过渡时的 Webkit 边框半径和溢出错误

当我使用溢出、边框半径和过渡的组合时，我遇到了一个奇怪的错误。我有一个 div，里面有一个 img：当我组合使用 overflow、border-radius 和 transition 时，我遇到了一个奇怪的错误。我有一个 div，里面有一个 img： <a href="#" class="block size1 annualreport nonprofit"> <div class="inner_block"> <img src="http://i.imgur.com/8uuZB.jpg" /> </div> </a> div有一个border-radius，溢出设置为隐藏： body {background-color:#78735e;} .block { position: absolute; left: 0px; top: 0px; border-radius: 10px; margin: 6px; box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2); overflow:hidden; } .size1 { width: 226px; height: 464px; min-width: 160px; max-width: 226px; } .inner_block { overflow: hidden; border-radius: 10px; } .block img { width: 100%; height: 100%; transition: all 0.1s; } .block img:hover { width:115%; height:115%; } 当我将鼠标悬停在 img 上时，会发生一个过渡，使图像变大以创建缩放效果。问题是 overflow 似乎在图像的左下角和右下角断裂了。我创建了一个 JSFiddle 供您查看我在说什么。 http://jsfiddle.net/dmcgrew/HuMrC/1/ 它在 Firefox 中运行良好，但在 Chrome 和 Safari 中会出现问题。有人知道可能是什么原因造成的或如何解决它吗？我也遇到了同样的问题。将其添加到父容器中为我解决了这个问题。 .transitionfix { backface-visibility: hidden; transform: translate3d(0, 0, 0); } -- 简单的解决方案 -- 在具有动画过渡的同一元素上，只需添加： .animated-item { will-change: transform; /* New line to add to your existing CSS */ } will-change CSS 属性向浏览器提示元素将如何更改。浏览器可能会在元素实际更改之前设置优化。这些类型的优化可以通过在实际需要之前完成可能昂贵的工作来提高页面的响应能力。 ~ https://developer.mozilla.org/en-US/docs/Web/CSS/will-change 我在 Safari 上遇到过这个问题（这是 Safari 中的一个已知错误）；通过应用 -webkit-mask-image 修复了它，它对我来说非常有效。干杯 .block { -webkit-mask-image: -webkit-radial-gradient(white, black); } 我为图像添加了负 z 索引值，为父级添加了更高的值 li {z-index:10; overflow: hidden;} li img {z-index: -10;} 我不知道我是否正确理解了问题，因为图像未加载。如果您将 height: 100%; 添加到 .inner_block 对您的问题有帮助吗？ http://jsfiddle.net/HuMrC/2/ 已经有一个关于用于创建新的堆叠上下文的 CSS 属性的答案： isolation: isolate; 我过去在尝试放大 div 内的照片时遇到过这样的问题。我通过在缩放变换中添加旋转 scale(1.05) rotate(0.02deg) 来修复它（它实际上消除了故障线）我今天的问题是消除translateY div 悬停效果中的故障线。令人惊讶的是，我通过删除overflow: hidden;摆脱了它们希望这对未来的调试人员有所帮助。这是一个有关堆叠上下文的问题。我们可以使用MDN - stacking context中列出的方法来形成一个stacking context： position: relative; z-index: 1; -webkit-mask-image: -webkit-radial-gradient(white, black); opacity: 0.999; will-change: transform; 对于我个人来说，第一种方法是最好的。

css google-chrome safari webkit overflow

回答 8 投票 0

捕获用户正在浏览器中查看的 https 网页

我正在开发一个桌面应用程序，允许用户捕获网络浏览器中加载的网页内容。我从浏览器获取 URL，然后将内容加载到我的 WebView 中并...

cookies https webkit capture

回答 1 投票 0

如何覆盖“::-webkit-scrollbar”CSS规则并使滚动条再次可见

我使用以下规则使滚动条不可见： ::-webkit-scrollbar { 显示：无； } 如何覆盖此规则以使滚动条再次可见？我尝试了以下方法： ::-webkit-scroll...

css webkit scrollbar

回答 2 投票 0

WebkitSpeechRecognition 在 Electron 中返回网络错误

最近（过去 1.5 周内）JavaScript 库 WebkitSpeechRecognition 拒绝正常工作。我已经测试了利用该库的其他电子应用程序（evan 的智能镜像......