相关疑难解决方法(0)

我经常使用此代码将div视图置于中心:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

它适用于Firefox,Internet Explorer和Chrome,但不适用于Safari.

在Safari Web浏览器中居中图像的解决方法是什么？

我正在使用CSS3过渡显示模态弹出窗口(主要是从Effeckt.css借来的).它适用于除Safari之外的所有现代浏览器.在Safari中,运动正常,但背景色不均匀.

这是代码,问题在OSX上的Safari中可见:http://jsfiddle.net/eJsZx/4/

在问题解决之前问题的屏幕截图.您可以看到div的一半正确着色为白色,一半仍然是透明的.

这是CSS的相关部分(.effeckt-show和.md-effect-8应用按钮被点击时,以显示模式):

.effeckt-modal {
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  background: white;
}
.md-effect-8 {
  -webkit-perspective: 1300px;
  -ms-perspective: 1300px;
  -o-perspective: 1300px;
  perspective: 1300px;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.md-effect-8 .effeckt-modal {
  -webkit-transform: rotateY(-70deg);
  -ms-transform: rotateY(-70deg);
  -o-transform: rotateY(-70deg);
  transform: rotateY(-70deg);
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
  opacity: 0;
}
.effeckt-show.md-effect-8 .effeckt-modal {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: …

我正在将我制作的 Gif 转换为 CSS 动画。一切都在 Chrome、Firefox、Opera 上运行，但是当涉及到 Safari 时，它就起作用了。

当我最初加载页面时，图像会忽略翻译并位于下方，但是一旦我单击 Safari 选项卡并返回，页面就会更新并且图像具有由翻译提供的适当坐标。

有谁知道为什么会发生这种情况？

HTML：

<section>
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Globe.png" class="globe center" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Red.png" class="center redSpin" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Orange.png" class="center orangeSpin" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Yellow.png" class="center yellowSpin" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Green.png" class="center greenSpin" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Blue.png" class="center blueSpin" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Indigo.png" class="center indigoSpin" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Violet.png" class="center violetSpin" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Continents.png" class="center continent" width="170%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/GlobeMask.png" class="center knockOut" width="190%">
    </section>

CSS：

*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color:#333;
    overflow: hidden;
}

.center{
    position: …

我正在处理的网页出现问题。在 Firefox 上似乎没有任何问题。

我有 2 个元素，水平滚动，带有背景图像，这两个元素之间的过渡是使用 CSS3 进行的，transformX()、. 首先，这两个元素重叠（以便您可以看到第二个元素的背景图像），当您单击向右箭头时，第二个元素在前面从右向左滑动。当您单击右侧时，第一个元素从左向右滑动

当我返回第一个元素时，第二个元素会闪烁，就像重新排列其位置一样。

.first-container.first-container1 {
    background: transparent url('../img/backgrounds/first1-background.jpg') no-repeat center center;
    background-size: cover;
    left: 0;
}
.first-container.first-container2 {
    background: transparent url('../img/backgrounds/first2-background.jpg') no-repeat center center;
    background-size: cover;
    left: 100%;
}


.bs-first .first1 .first-container.first-container2 {
    -webkit-transform: translateX(-8.5%);
    -moz-transform: translateX(-8.5%);
    -o-transform: translateX(-8.5%);
    -ms-transform: translateX(-8.5%);
    transform: translateX(-8.5%);
}

.first2 .first-container.first-container1 {
    -webkit-transform: translateX(8.5%);
    -moz-transform: translateX(8.5%);
    -o-transform: translateX(8.5%);
    -ms-transform: translateX(8.5%);
    transform: translateX(8.5%);
    z-index: 9;
}

我真的可以使用一些关于如何解决这个问题的提示。谢谢你！

我有一个元素绝对位于另一个元素之上。问题是背景元素有一点 JS 可以根据鼠标的移动在 Y 轴上旋转。不幸的是，我在 Safari 中发现了一个在 Firefox 或 Chrome 中没有出现的问题。

http://jsfiddle.net/cehzd/2/

背景元素穿过前景元素，我想知道是否有什么可以防止这种情况，或者让它像 Firefox 一样运行。

编辑：更新了示例以包含背景图像（渐变），这与我在网站中看到的更加准确。这个错误确实出现在 Windows 和 Mac 上（与之前的示例不同，无背景图像，仅在 Windows 上）

我正在使用 CSS 过渡和旋转效果来显示名片。我在 Chrome 和 FF 中一切正常，但在 Safari 中它扭曲了 div。

我尝试应用以下属性无济于事：

transform: translateZ(0px);
transform-style: flat;
transform: translate3d(0,0,0);

有关代码和图片，请参阅Codepen：

苹果浏览器：

铬合金：