CSSがSafariでうまく動きません。。

Question

react.jsを使ってWebアプリを作成したのですが、
Safariだとどうしてもデザインが崩れてしまします。
Chrome,Firefoxは動作確認できました。。

-web-kitとかも使用しているので原因がわからなくて。。。。

もしわかるって方がいたら教えてください。

該当ページ

該当部コード

class List extends Component {
  componentWillMount () {
    this.props.actions.setTitle("自動車免許学科試験 | 過去問一覧")
    this.props.actions.setCanonical("http://menkyo.site/")
    this.props.actions.setBreads([{title: "リスト", url: "http://menkyo.site/problems"}])
  }

  render() {
    const style = {
      main: {
        margin: "16px",
        padding: "16px",
        backgroundColor: "#FFFFFF",
        flex: "1",
        display: "-webkit-flex",
        display: "-moz-flex",
        display: "-ms-flex",
        display: "-o-flex",
        display: "flex",
        overflow: "auto"
      },
      scroll: {
        minHeight: "-webkit-min-content",
        minHeight: "-moz-min-content",
        minHeight: "min-content",
        display: "-webkit-flex",
        display: "-moz-flex",
        display: "-ms-flex",
        display: "-o-flex",
        display: "flex",
        flexDirection: "column",
        WebkitFlexDirection: "column"
      }
    };
    return (
      <section key={"list"} style={style.main}>
        <div key={"style"} style={style.scroll}>
          {this.props.problems.map(item =>
            <Link to={"problems/" + item.id} key={item.id}>
              <h2 key={"text"+item.id}>題{item.id}門: {item.text}</h2>
            </Link>
          )}
        </div>
      </section>
    );
  }
}
// globalから取得してpropsに渡す
function mapStateToProps(state) {
  return {
    problems: state.default.problems.problems,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(Actions, dispatch),
  };
}
// problemsとactionsを渡す
//=> const { problems, actions } = this.props
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(List);

Comments

[kei344]

「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」をお書きください。

[KentoSasamoto]

chromeで表示したときが求めている表示です。
safariで表示するとaタグの高さを設定しても0になってしまうので重なった表示になります

[asahina_dev]

return ( <section key={"list"} style={style.main}> ...)

の時点での「style」の中身のダンプをとってみましたか？

[KentoSasamoto]

dumpはとっていませんが、開発モードでデザインがstyleがあたっていることは確認しました。

[asahina_dev]

ぱっとみ何かの言語のHASH で保存されているので
{
margin: "16px",
padding: "16px",
backgroundColor: "#FFFFFF",
flex: "1",
display: "flex",
overflow: "auto"
}

のようになってる気がするのですが、すべて出力されているということで？

[KentoSasamoto]

React.js内のstyle記法を用いています。
そして、それらのstyleは適用されています。

Answer 1

<div key={"style"} style={style.scroll}>
```を

<div key={"style"}> ```にしてみてください。

「min-height: min-content;」というCSSは試験的機能であり、Safariに実装されていません。
flex指定も、他のブラウザと同じ挙動にしたいのであれば必要ありません。（他のブラウザについても）無くても同じような表示になると思います。

Comments

[KentoSasamoto]

なるほど。。。
そうだったのですね！動きました！ありがとうございます！！