技術日誌

野球関係のサービスを個人開発しています。

react-planetがsafari12系で動かない問題

react-planet

concept.png 手軽に円形メニュー(Circular Menu)を提供できるライブラリ。

ResizeObserver is not defined

react-planetではリサイズイベントをResizeObseverによって検知しています。

ただし、ResizeObserverはsafari 13.1以降に対応しています。 手元にあるiPhone5Sはsafari12系でした。

react-planet ┗ use-resize-observer   ┗ resize-observer-polyfill

今回、おそらく動いていないのはresize-observer-polyfillのようです。 きちんとメンテされてそうなのはこれ。 resize-observer

ただ、use-resize-observerのソースを書き換えて、 react-planetのdependencyも変えないといけないので一旦調査してエラー回避する方向で終了。

TopMenuコンポーネントの中でreact-planetを使っています。

 {typeof ResizeObserver !== 'undefined' 
          ? 
          <div id="topMenu">
            <TopMenu/>
          </div>
          :<></>
        }