Safari上的CSS翻译问题

文章/答案/技术大牛

发布

1回答

html、css、safari、cross-browser、css-animations

我正在努力转换一个Gif我做了一个CSS动画。在Chrome、Firefox、Opera上，一切都能正常运行，但在Safari上却表现不佳。当我最初加载页面时，图像忽略Translate并坐在下面，但一旦我单击Safari选项卡并返回，页面就会更新，图像具有translate给出的适当坐标。有人知道为什么会发生这种情况吗？dev.colecampbell.design/CodePen/GayDay/img/GlobeMask.png"

浏览 6提问于2017-02-03得票数 6

1回答

Safari中不支持Overflow-x

css

我已经使用CSS和overflow-x: hidden;在菜单中实现了一个移动幻灯片，以便在翻译出屏幕时隐藏菜单。这条规则在苹果和iOS上的Safari上都没有得到遵守，但在Mac上的Chrome和Firefox上却运行得很好。我不确定这是Safari中的错误还是我的CSS规则集有问题。任何意见都将不胜感激！这是我的网站：ht

浏览 37提问于2019-12-18得票数 1

回答已采纳

1回答

纯css3视差与移动

html、ios、css、parallax

我使用transform3D来实现纯粹的css视差效果。我在这里有一个非常混乱的演示设置：transform: translateZ(-1px) scale(2);transform-style: preserve-3d; 我希望使用溢出:隐藏来裁剪我的并行图像。这在桌面Chrome / Safari上很好，但在Mobile上停止工作。从我的进一步实验

浏览 1提问于2014-08-12得票数 4

1回答

Safari - CSS关键帧动画不触发

css、animation、svg、css-animations、keyframe

我有一个SVG与一个简单的CSS动画，这是完美的工作在每个浏览器。 } transform: translate(50%, -50%) rotate(-360deg);} 第一个关键帧被应用(翻译)，但它在此帧上保持冻结状态。

浏览 7提问于2022-04-18得票数 0

1回答

Safari转换SVG错误

css、svg、safari、webkit

我用一个简单的svg制作了一个小的CSS动画，将我的汉堡菜单转换为一个十字。它在Chrome和Firefox上运行正常，但在Safari中没有翻译。画十字的两条线的翻译是错误的。我猜这与safari在应用缩放时如何处理转换有关。有没有人知道我是不是做错了什么？ @keyframes sho

浏览 2提问于2020-09-09得票数 0

1回答

转换(x，y，z)中的百分比值不起作用

css、css-transforms

我有动画使用翻译一个2D翻译。但我希望执行硬件加速，因此使用了translate3d()。这是我的CSS： position:fixed; left:50%; margin-left:-10%; transform: translate3d(0%,110%,0%); -webkit-transform: translate3d(0%,110%,0%); /** Safari

浏览 2提问于2014-01-17得票数 2

回答已采纳

2回答

IOS safari :使用transform3d时裁剪iframe

javascript、iframe、css、iphone、mobile-webkit

人们已经找到了一种使用css转换在ios设备上使div可滚动的方法。我对IOS safari上的iframes有一个问题，如果我尝试使用css3转换在iframe中滚动内容，结果内容将被剪裁到屏幕上首先呈现的内容。这在android设备上很好，在IOS上也很好，但在iframes上不起作用。这似乎是safari webkit实现中的一个bug。我已经尝试将ifra

浏览 3提问于2010-12-21得票数 2

3回答

无法通过translate3d停止转换的CSS3转换

android、css、transform、transitions、translate3d

我正在尝试使用translate3d：通过CSS3事务来为元素添加动画。// for start animation .css("-webkit-transition", "all 100s");// for stop animation $("#

浏览 5提问于2013-03-19得票数 2

1回答

在适用于iPhone和iPad的Chrome上的translate3d期间图像消失

iphone、css、google-chrome、css-transforms

我有一个覆盖流类型的图片库，我已经创建了移动图片查看。第一次迭代在这里：。我已经连接了触摸事件，在iPhone和iPad上的移动Safari似乎一切都很顺利，但当我在iPhone或iPad的Chrome上查看它时，图像在CSS translate3d的一部分中消失了，CSS我已经将-webkit-backface-visibility: hidden;添加到组成swiper的所有标记中，这并不能修复我的</e

浏览 3提问于2013-05-10得票数 1

回答已采纳

3回答

移动Safari上的CSS背景问题

ios、css、iphone、ipad、safari

我正在尝试创建一个全屏div，到目前为止，它在chrome、firefox和safari上都能很好地工作，但在ipad和iphone上，背景图像和div的大小就不成比例了。这是我到目前为止所知道的：<div class="intro"></div>.intro { min-height:cover; -moz-background-size:

浏览 0提问于2014-11-23得票数 0

1回答

Safari上的CSS文本对齐问题

css、safari、mobile-safari、text-alignment

文本在Chrome中正确地对齐，但是当它在Safari中运行时，文本会扰乱其位置，并触及容器的顶部(文本容器)。铬：正如您在Safari中所看到的，文本容器(span)有其适当的大小，但是里面的文本正在接触屋顶。我已经尝试了一些事情来解决这个问题，通过混乱的高度，线的高度，位置等，但仍然没有运气。目前在图像中使用的方法是，我已经使span位置是绝对的，并在中间对齐它，并且它(span)在中间，但是文本不

浏览 0提问于2021-06-01得票数 0

1回答

CSS: Safari上的堆叠顺序问题

css、safari、z-index

我正在尝试使用CSS创建一个形状，使用之前和之后的伪元素。在Chrome和Firefox中，图形的渲染效果和我预期的一样，但在Safari中，：shape内容最终堆叠在:after内容之上，我不知道为什么。它看起来和我的: the元素中的转换有关，但是我不确定我到底做错了什么，也不确定为什么它只在Safari中不同，我不知道如何修复它。

浏览 3提问于2019-11-12得票数 1

回答已采纳

1回答

使用css定位元素

html、css、css-position、positioning

我有三个div，其中有两个元素，一个是图像，另一个是另一个div中的h3标记。我已经创建了一个类，用于将h3标记定位到图像的中心。然而，当我将类应用于这些div时，h3位于中心，而不是在第一个div的情况下，它位于图像上方。:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')"; /* CSSimg src="img/events

浏览 0提问于2018-03-30得票数 0

3回答

页面上的字符作为问号出现，尽管charset="utf-8“。

html、character-encoding

有人好心地替我们的网站翻译了捷克语，但这些特殊的人物以问号的形式出现，例如：这是在黑条上显示的文本： <meta charset="UTF-8" /> <link rel="stylesheet" h

浏览 1提问于2011-08-02得票数 2

回答已采纳

1回答

如何处理自动添加到文本字段的文本？窃听器？

wordpress、plugins、buddypress

我对成员的“索引”和“成员-循环”php文件进行了一些定制，并将Themify作为我的主题。我感谢任何帮助或指导。谢谢！！

浏览 4提问于2022-06-10得票数 0

1回答

translateX和转换计时函数不能在chrome中工作吗？

css、google-chrome、animation、css-transitions

当我使用left: xx的转换时，它起作用了。但是由于translate使用GPU要快得多，所以我想用这个来代替。你知道为什么会这样吗？

浏览 3提问于2013-07-19得票数 0

回答已采纳

1回答

CSS Safari /移动翻译和最小高度

html、css、twitter-bootstrap-3

我有，它在Chrome、Firefox和IE上都很好，但是在Safari (Win版本)上它会做一些奇怪的事情。首先，图像的最小高度是不工作的，即使它应该是支持的，我在垂直中心的定位上遇到了一些麻烦。手机是我最容易使用的浏览器之一(标枪，小米红米2)，我有，但不确定它是否只是一个缓存。有人能帮我吗？提前谢谢。

浏览 1提问于2015-11-05得票数 0

回答已采纳

4回答

如果我在常规语法的同时包括供应商前缀，那么转换会被应用两次吗？

javascript、jquery

说我有个div在javascript/jquery中，我要介绍：$('#box').css('-webkit-transform','translateX(300px)'); 现在我可以运行任何一个(或两个)句子，它将运行在桌面(Chr

浏览 7提问于2016-02-05得票数 0

1回答

CSS3 translateZ不在mac 8.0.3中

css、safari、transform

<div id="css-transform-container"> width:100%; perspective: 180px; cursor: z

浏览 2提问于2015-02-07得票数 0

回答已采纳

0回答

Safari css的问题

css、safari、cross-browser

当我点击顶部的“我的浏览”按钮时，标题向下移动到内容。但当我将鼠标移到header上时，它会出现在他的位置上。其他浏览器中的可以完美地工作

浏览 6提问于2017-01-05得票数 0

回答已采纳

点击加载更多