Comments (5)
Thanks for the reproduction steps. I don't have time to look into this right this moment, but it sounds like something that I probably won't be able to workaround and will have to list as a known issue. I don't think there is a good way for me to detect of the browser is zoomed in or not in order to opt-out of using autosize.
The way autosize does its height calculations is to remove the height from the textarea and measure how much overflow it has, then set it back to its previous height + overflow. I expect that approach is causing this problem. The alternative approach would be to have a hidden textarea element that mirrors all the input + styles + dimensions of the real textarea element that can be used for making calculations without affecting the document-flow, but that has a lot of problems too and would be an entirely different script.
I think these types of issues could be avoided if autosize wasn't expected to shrink when content is deleted. Trying to capture the shrinking of the textarea element is what's causing these reflow issues because there is no way to know that the textarea should be smaller without first making it smaller to see exactly how much (if any) overflow it would still have.
Sorry, I know you probably don't care about these implementation details, just trying to say that this might be an unfixable problem with this particular script unless you are willing to give up some functionality (shrinking).
from autosize.
Thank you for your detailed explanation, maybe it is a Safari bug.
When I open the console in Safari (for a page that is zoomed out one step) and set:
> document.documentElement.scrollTop = 10
< 10
And then I read the same value:
> document.documentElement.scrollTop
< 9
from autosize.
I filed a WebKit bug report https://bugs.webkit.org/show_bug.cgi?id=237225 let’s see what happens.
When I remove the lines there scrollTop is set, the issue seems to be gone. But I guess this is here for a reason.
// prevents scroll-position jumping
overflows.forEach(el => {
el.node.scrollTop = el.scrollTop
});
if (docTop) {
document.documentElement.scrollTop = docTop;
}
from autosize.
When I remove the lines there scrollTop is set, the issue seems to be gone
Thanks for the info.
But I guess this is here for a reason.
Yeah, it's like a bookmark to restore the scroll position of the page after calculations are done. When the height is removed from the textarea element it can change the height of the page which can lead to the scroll position not being in the same place once the textarea height is re-established. It's related to the problem I mentioned earlier about not having a good way of determining the actual height without clearing the existing height first. Sorry to drop the ball on responding.
That scroll position code would be unneeded if autosize was changed to not detect shrinkage (no need to clear existing height, just need to check if overflow exists in order to further expand height).
from autosize.
I can reproduce this in Safari 15.3.
from autosize.
Related Issues (20)
- How do i apply autosize for textareas created using JQuery ? HOT 3
- How to resize plus additional more row. HOT 2
- Bug with scroll-behavior: smooth HOT 2
- Padding bottom not working with Firefox ? HOT 4
- 5.0.0 not marked as latest HOT 1
- ESM version uses ES6+ syntax other than import and export HOT 2
- 通过getRealMetrics方法获取density和通过getDisplayMetrics()获取的density值不一致 HOT 1
- Bug: Plugin Sporadically Adds Disabled Vertical Scrollbar HOT 1
- Adapter some phones for suddenly amplify the views and shrinking after.
- When the end of the line is reached, pressing the spacebar does not switch to a new line. HOT 1
- autosize 与multdex 在低版本上运行报错
- The account name input field collapses when trying to insert prohibited characters HOT 6
- Conflicting with LastPass Browser Extension HOT 1
- [issue]autosize after changing padding HOT 2
- Release note for each major update? HOT 2
- Text "jumps" when new line since 6.0.1 HOT 2
- [6.0.0 regression] Disabled horizontal scrollbar appears when reaching max-height HOT 3
- Jerky inertial scrolling on iOS HOT 1
- Uncaught TypeError: e.has is not a function with dist/autosize
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from autosize.