abachman/textarea-bonanza.rb

## textarea-bonanza.rb
#!/usr/bin/env ruby

#
# Demo of the "severe typing lag" layout bug we found.
#
# Things that fix the lag:
# - set textarea width to a non-percentage value
# - set .container grid-template-rows: to anything other than `auto`, e.g.,
#   `100vh` or `100%` work; or remove the property
# - set .container height: to a fixed value or remove the property
#
# Weird things:
# - the generated HTML file shows typing lag for me on Chrome 83, but not on Safari 13.1
#

File.open('textareas.html', 'w') do |f|
  f.puts "<!doctype html>"
  f.puts "<html>"
  f.puts "<head>"
  f.puts "  <style>"
  f.puts %(
    .container {
      display: grid;
      grid-template-rows: auto;
      height: 100vh;
      overflow: hidden;
    }

    .main {
      overflow: auto;
    }

    .content {
      padding: 20px;
    }

    textarea {
      width: 100%;
    }
  )
  f.puts "  </style>"
  f.puts "</head>"
  f.puts "<body>"
  f.puts "<div class='container'>"
  f.puts "  <div class='main'>"
  f.puts "    <div class='content'>"
  1200.times do
    f.puts "<div class='exchange'>"
    f.puts "<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin faucibus diam elementum, pellentesque orci vel, interdum neque.</textarea>"
    f.puts "</div>"
  end
  f.puts "    </div>"
  f.puts "  </div>"
  f.puts "</div>"
  f.puts "</body>"
  f.puts "</html>"
end
	#!/usr/bin/env ruby

	#
	# Demo of the "severe typing lag" layout bug we found.
	#
	# Things that fix the lag:
	# - set textarea width to a non-percentage value
	# - set .container grid-template-rows: to anything other than `auto`, e.g.,
	# `100vh` or `100%` work; or remove the property
	# - set .container height: to a fixed value or remove the property
	#
	# Weird things:
	# - the generated HTML file shows typing lag for me on Chrome 83, but not on Safari 13.1
	#

	File.open('textareas.html', 'w') do \|f\|
	f.puts "<!doctype html>"
	f.puts "<html>"
	f.puts "<head>"
	f.puts " <style>"
	f.puts %(
	.container {
	display: grid;
	grid-template-rows: auto;
	height: 100vh;
	overflow: hidden;
	}

	.main {
	overflow: auto;
	}

	.content {
	padding: 20px;
	}

	textarea {
	width: 100%;
	}
	)
	f.puts " </style>"
	f.puts "</head>"
	f.puts "<body>"
	f.puts "<div class='container'>"
	f.puts " <div class='main'>"
	f.puts " <div class='content'>"
	1200.times do
	f.puts "<div class='exchange'>"
	f.puts "<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin faucibus diam elementum, pellentesque orci vel, interdum neque.</textarea>"
	f.puts "</div>"
	end
	f.puts " </div>"
	f.puts " </div>"
	f.puts "</div>"
	f.puts "</body>"
	f.puts "</html>"
	end