Question

我有一个宽大的画布，我无法在Safari中居中。在除Safari之外的任何浏览器上，它都是完美的。

＆＃13;

.center {
  padding: 0;
  margin: auto;
  display: block;
  height: 100vh;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
}

＆＃13;

在damiano celent的建议之后我修改了这样的代码

left: 50vw;

看起来它适用于iphone 4s但不适用于iphone 6

Answer 1

我用它来运行safari和chrome。

var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');

drawBackground();

function drawBackground()
{
  var img = new Image();
  img.src = 'tunnel.jpeg';

  //when image loads
  img.onload = function(){

    //put in center
    context.drawImage(img, canvas.width/2 - img.width/2, canvas.height/2 - img.height/2);
  }
}

希望它适合你！

Answer 2

所以我做了一点点黑客以避免我们无法解决的问题。

动画画布在这里：

.center{  
position:static;
    padding: 0;
    margin: auto;
    display: block;
    height: 100vh;
  z-index: 2;

    }

虽然背景图片有以下选项：

background-size: cover;
background-position: 
bottom center;
background-image: url('images/fon.jpg');
background-color:rgba(0, 0, 0, 1);
margin:0px;
overflow: hidden

Safari的中心广场

2 个答案: