Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
grid height bug?
#!/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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.