画像にLozadを使った状態でページ内リンク（smooth scroll）をするとSafariの時だけずれる

Question

前提・実現したいこと

こんにちは。本当に困っているのでご相談させて下さい。。。

タイトルの通りなのですが、画像がたくさん並んでいるセクションのタイトル部分にIDがついていて、ページ内リンクでその箇所に行くと、Safariで確認する時だけずれてしまいます。

画像はLozadをつかって遅延読み込みをしているので、そのズレだとおもって、しらべたら
https://parashuto.com/rriver/development/img-size-attributes-are-back

imgタグにはwidthとheight属性を書くのがいいらしい

とでてきたので、下のように書いているのですが、そもそも、iosのSafariとChromeだとそもそも高さが担保されていませんでした。

PCでのChromeだとちゃんと赤い四角がならんでます。

該当のソースコード

<img class="lozad" width="214" height="123" src="" style="background-color:#f00;border:1px solid;">

うかがいたい事

ios safariやChromeでimgにwidth="" height="" の属性をきかせることはできますか？
また、似たようなバグ？を認識されている方や、解決方法をご存知の方はいらっしゃいますでしょうか？

かなり初心者で数日しらべてるのですが、同じことで困っている方がみつかりませんでした。
どなたか、お願いします。