Safariだけでposition:absoluteがずれるときの確認事項・対処方法　CSS

タイトル通り、Safariでだけabsolute指定した要素がずれていることがあります。

Safariはほんまにこういうこと多くて困るんですけども。

とりあえず確認するべき事項としては、absoluteにするときにtopとかleftで位置の指定をしますよね。
その時に、例えばleftだけでなく、rightも書いてあげることで解決することがあります。
rightは数値入れたくない場合はautoにします。

若干めんどくさいんですがどうしてもズレが直らない要素には、top,bottom,left,rightの四つを全部書いてあげてみてください。

ズレる例

これはChromeでは問題ないけどsafariはズレる場合があります。

.sample{
  position: absolute;
  top: 10px;
  left: 10px;
}

.sample{
  position: absolute;
  top: 10px;
  left: 10px;
}

解決策

.sample{
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: auto;
  right: auto;
}

.sample{
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: auto;
  right: auto;
}

このように、まだ書いていなかった方向をautoで指定してみてください。