WebKit Bugzilla
Attachment 358488 Details for
Bug 193192
: [css-sticky] sticky canvas obscures scrollbars of (flexbox?) parent
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
Self-contained example
nativescrollbars.html (text/html), 2.60 KB, created by
Andy E
on 2019-01-07 01:44:24 PST
(
hide
)
Description:
Self-contained example
Filename:
MIME Type:
Creator:
Andy E
Created:
2019-01-07 01:44:24 PST
Size:
2.60 KB
patch
obsolete
><!DOCTYPE html> ><html> > <head> > <meta charset="utf-8"> > <style type="text/css"> > #wrapper { > position: absolute; > width: 500px; > height: 300px; > overflow: auto; > background: white; > top: calc(50% - 150px); > left: calc(50% - 250px); > display: flex; > } > > #canvas { > position: -webkit-sticky; > position: sticky; > top: 0; > left: 0; > bottom: 0; > right: 0; > width: 100%; > height: 100%; > background-color: lightblue; > } > > </style> > </head> > <body> > <div id="wrapper"> > <canvas id="canvas" width="500" height="300"></canvas> > <div id="inner"><div id="innerinner"></div></div> > </div> > > <script> > const ctx = canvas.getContext('2d'); > const rowHeight = 32; > const colWidth = 100; > const numRows = 100; > const numCols = 100; > const rowsPerView = canvas.height / rowHeight; > const colsPerView = canvas.width / colWidth; > let rendering = false; > > ctx.fillStyle = 'blue'; > ctx.strokeStyle = 'gray'; > ctx.font = '12px Verdana'; > ctx.translate(0.5, 0.5); > > inner.style.height = `${rowHeight * numRows + 1}px`; > innerinner.style.width = `${colWidth * numCols + 1}px`; > > if (wrapper.scrollWidth > innerinner.offsetWidth) { > innerinner.style.width = `${(colWidth * numCols + 1) - wrapper.offsetWidth}px`; > } > > function drawCells() { > rendering = false; > ctx.clearRect(0, 0, canvas.width, canvas.height); > > const { scrollTop, scrollLeft } = wrapper; > > for (let i = 0; i <= rowsPerView; i++) { > const row = Math.floor(scrollTop / rowHeight) + i; > const rowOffset = (rowHeight - (scrollTop % rowHeight)) + ((i -1) * rowHeight); > > if (row < 0 || row + 1 > numRows) { > continue; > } > > for (let j = 0; j <= colsPerView; j++) { > const col = Math.floor(scrollLeft / colWidth) + j; > const colOffset = (colWidth - (scrollLeft % colWidth)) + ((j - 1) * colWidth); > > if (col < 0 || col + 1 > numCols) { > continue; > } > > ctx.strokeRect(colOffset, rowOffset, colWidth, rowHeight); > ctx.fillText(`Cell ${row},${col}`, colOffset + 10, rowOffset + 22); > } > } > } > drawCells(); > > wrapper.addEventListener('scroll', () => { > if (!rendering && wrapper.scrollTop >= 0 && wrapper.scrollTop <= inner.offsetHeight) { > rendering = true; > requestAnimationFrame(drawCells); > } > }); > </script> > </body> ></html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #wrapper { position: absolute; width: 500px; height: 300px; overflow: auto; background: white; top: calc(50% - 150px); left: calc(50% - 250px); display: flex; } #canvas { position: -webkit-sticky; position: sticky; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background-color: lightblue; } </style> </head> <body> <div id="wrapper"> <canvas id="canvas" width="500" height="300"></canvas> <div id="inner"><div id="innerinner"></div></div> </div> <script> const ctx = canvas.getContext('2d'); const rowHeight = 32; const colWidth = 100; const numRows = 100; const numCols = 100; const rowsPerView = canvas.height / rowHeight; const colsPerView = canvas.width / colWidth; let rendering = false; ctx.fillStyle = 'blue'; ctx.strokeStyle = 'gray'; ctx.font = '12px Verdana'; ctx.translate(0.5, 0.5); inner.style.height = `${rowHeight * numRows + 1}px`; innerinner.style.width = `${colWidth * numCols + 1}px`; if (wrapper.scrollWidth > innerinner.offsetWidth) { innerinner.style.width = `${(colWidth * numCols + 1) - wrapper.offsetWidth}px`; } function drawCells() { rendering = false; ctx.clearRect(0, 0, canvas.width, canvas.height); const { scrollTop, scrollLeft } = wrapper; for (let i = 0; i <= rowsPerView; i++) { const row = Math.floor(scrollTop / rowHeight) + i; const rowOffset = (rowHeight - (scrollTop % rowHeight)) + ((i -1) * rowHeight); if (row < 0 || row + 1 > numRows) { continue; } for (let j = 0; j <= colsPerView; j++) { const col = Math.floor(scrollLeft / colWidth) + j; const colOffset = (colWidth - (scrollLeft % colWidth)) + ((j - 1) * colWidth); if (col < 0 || col + 1 > numCols) { continue; } ctx.strokeRect(colOffset, rowOffset, colWidth, rowHeight); ctx.fillText(`Cell ${row},${col}`, colOffset + 10, rowOffset + 22); } } } drawCells(); wrapper.addEventListener('scroll', () => { if (!rendering && wrapper.scrollTop >= 0 && wrapper.scrollTop <= inner.offsetHeight) { rendering = true; requestAnimationFrame(drawCells); } }); </script> </body> </html>
View Attachment As Raw
Actions:
View
Attachments on
bug 193192
: 358488