My HTML website is wrong in Iphone browser

I have a website and it works correctly in Desktop and Androids.

When I check my website in Iphone, there are 2 things that are wrong

1. Size Value in HTML input tag does not increase the size of input but it depends on Max Value

2. When i scroll down my website while it loads more contents, the page scroll up to the beginning which is different in Desktop and Androids.

Is there any solution to fix this like changing some my HTML and Javascript codes in order it to work correctly in Iphone browser?

These are my codes:

<input  min="1" max="200" value="1" maxlength="7" required size="7">

if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 50)){//Loads}

1. On iOS Safari, the size attribute of an doesn't affect the visual width of the input like it does in desktop browsers or Android. Instead, the size is more determined by CSS, and the max value can influence the layout in subtle ways.

Solution: Use CSS to control the size, not the size or max attribute.

<input
  type="number"
  style="width: 100px;" 
  min="0"
  max="9999"
  inputmode="numeric"
/>

// For small devices like iPhone
@media screen and (max-width: 500px) {
  input[type="number"] {
    width: 100px;
  }
}

2. You append elements without preserving scroll state. Or the browser is trying to "guess" the layout and re-renders.

Solution: Use position: relative on containers

.container {
  position: relative;
}

If you’re loading content with JavaScript, manually preserve scroll:

const scrollPos = window.scrollY;
loadMoreContent(); // append content
window.scrollTo({ top: scrollPos });