avesus.github.io

<!DOCTYPE html>
<html style="height: 100% !important; -webkit-overflow-scrolling: touch !important; overflow: auto !important;">
<head>
  <title>iOS Super Simple</title>
  <meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <style>
    #window {
      position: relative;
      box-sizing: border-box;
      border: 1px solid red;
      overflow: hidden;
      height: 100%;
    }

    input {
      /* Safari zooms page in if font size is less than 16px */
      font-size: 16px;
      margin: 20px 0px;
      height: 20px;
    }
  </style>
    <link rel="icon" href="/favicon.ico">
  <meta name="robots" content="noindex, follow">
  <!-- greenforest:share-metadata:start -->
  <!-- greenforest:preview-source:none -->
  <meta name="description" content="iOS Super Simple on Greenforest I/O.">
  <link rel="canonical" href="https://greenforest.io/docs/ios-super-simple.html">
  <meta property="og:site_name" content="Greenforest I/O">
  <meta property="og:title" content="iOS Super Simple">
  <meta property="og:description" content="iOS Super Simple on Greenforest I/O.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://greenforest.io/docs/ios-super-simple.html">
  <meta property="og:image" content="https://greenforest.io/social-previews/docs/ios-super-simple.png">
  <meta property="og:image:secure_url" content="https://greenforest.io/social-previews/docs/ios-super-simple.png">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="iOS Super Simple - Greenforest I/O share preview">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="https://greenforest.io/social-previews/docs/ios-super-simple.png">
  <meta name="twitter:image:alt" content="iOS Super Simple - Greenforest I/O share preview">
  <script src="/site-analytics.js" defer></script>
  <!-- greenforest:share-metadata:end -->
</head>
<body style="margin: 0; padding: 0; height: 100% !important; -webkit-overflow-scrolling: touch !important; overflow: auto !important;">
  <div id="window" style="height: 100% !important; -webkit-overflow-scrolling: touch !important; overflow: auto !important;">
    <div id="scroller" style="width: 100%; height: 100%; overflow: scroll; -webkit-overflow-scrolling: touch!important;">
      <div style="background: rgba(255,255,0,0.3); position: relative; width: 100%;">
        <input type="text" value="Tap me 1">
        <input type="text" value="Tap me 2">
        <input type="text" value="Tap me 3">
        <input type="text" value="Tap me 4">
        <input type="text" value="Tap me 5">
        <input type="text" value="Tap me 6">
        <input type="text" value="Tap me 7">
        <input type="text" value="Tap me 8">
        <input type="text" value="Tap me 9">
      </div>
    </div>
    <div style="will-change: transform; position: absolute; top: 0px; width: 100%; color: white; background-color: blue">Top</div>
    <div style="will-change: transform; position: absolute; bottom: 0px; width: 100%; color: white; background-color: blue">Bottom</div>
  </div>
</body>