Bug Type: Component
Environment
- Vue Version:
3.5.21
- Element Plus Version:
2.11.3
- Browser / OS:
firefox 143.0.1
- Build Tool:
Vite
Reproduction
Related Component
Reproduction Link
Element Plus Playground
Steps to reproduce
最小复现环境的链接中，取消最后一行注释，也就是加上backdrop-filter: blur(1px);样式后，滚动样式不生效。非safari的主流游览器基本都有这个bug
In the minimal reproduction environment, if you uncomment the last line, that is, add the style backdrop-filter: blur(1px);, the scrolling style will no longer work. This bug occurs in almost all mainstream browsers except Safari.
What is Expected?
el-affix 按期望固定
What is actually happening?
el-affix 被外层div带着移动
Additional comments
Because my English is not good, all translations are from GPT.
问题产生以及修复方案：
Problem and Fix:
原因：backdrop-filter / transform / will-change 这些都会把某个祖先变成 fixed 的 containing block，是浏览器的渲染规则。为了兼容父元素的这些css样式，此处固钉内部的top属性必须手动计算。
Cause: Properties such as backdrop-filter, transform, and will-change will turn an ancestor element into the containing block for position: fixed. This is a browser rendering rule. To be compatible with these CSS properties on parent elements, the top property inside the affix component must be calculated manually.
解决方法：使用 getBoundingClientRect() 手动计算top属性即可。
Solution: Use getBoundingClientRect() to manually calculate the top value.
已修复了问题的demo：
Demo with the issue fixed:
https://element-plus.run/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8ZGl2IGNsYXNzPVwib3V0ZXJcIj5cbiAgICA8IS0tIOS4i+mdouS9v+eUqGVsLWFmZml45bCx5Lya5Lqn55SfYnVnIC0tPlxuICAgIDxlbC1hZmZpeC1maXhlZD5cbiAgICAgIDxkaXYgc3R5bGU9XCJjb2xvcjogcmVkOyBiYWNrZ3JvdW5kLWNvbG9yOiBibHVlXCI+ZGVtbzwvZGl2PlxuICAgIDwvZWwtYWZmaXgtZml4ZWQ+XG4gICAgPGRpdiB2LWZvcj1cImkgaW4gMTAwXCI+e3sgaSB9fTwvZGl2PlxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQgc2V0dXAgbGFuZz1cInRzXCI+XG5pbXBvcnQgRWxBZmZpeEZpeGVkIGZyb20gJy4vRWxBZmZpeEZpeGVkLnZ1ZSc7XG48L3NjcmlwdD5cblxuPHN0eWxlPlxuLm91dGVyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogZ3JlZW47XG4gIHdpZHRoOiAyMHZ3O1xuICBoZWlnaHQ6IDMwMHZoO1xuICBtYXJnaW46IDIwcHg7XG5cbiAgLyoqXG4gICogdGhlIGVsLWFmZml4IHdpbGwgbm90IHdvcmtcbiAgKiBpZiBhbnkgYCo6aGFzKC5lbC1hZml4KXt9YCB1c2UgYmFja2Ryb3AtZmlsdGVyXG4gICovXG4gIGJhY2tkcm9wLWZpbHRlcjogYmx1cigxcHgpO1xufVxuPC9zdHlsZT5cbiIsImVsZW1lbnQtcGx1cy5qcyI6ImltcG9ydCBFbGVtZW50UGx1cyBmcm9tICdlbGVtZW50LXBsdXMnXG5pbXBvcnQgeyBnZXRDdXJyZW50SW5zdGFuY2UgfSBmcm9tICd2dWUnXG5cbmxldCBpbnN0YWxsZWQgPSBmYWxzZVxuYXdhaXQgbG9hZFN0eWxlKClcblxuZXhwb3J0IGZ1bmN0aW9uIHNldHVwRWxlbWVudFBsdXMoKSB7XG4gIGlmIChpbnN0YWxsZWQpIHJldHVyblxuICBjb25zdCBpbnN0YW5jZSA9IGdldEN1cnJlbnRJbnN0YW5jZSgpXG4gIGluc3RhbmNlLmFwcENvbnRleHQuYXBwLnVzZShFbGVtZW50UGx1cylcbiAgaW5zdGFsbGVkID0gdHJ1ZVxufVxuXG5leHBvcnQgZnVuY3Rpb24gbG9hZFN0eWxlKCkge1xuICBjb25zdCBzdHlsZXMgPSBbJ2h0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vZWxlbWVudC1wbHVzQGxhdGVzdC9kaXN0L2luZGV4LmNzcycsICdodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2VsZW1lbnQtcGx1c0BsYXRlc3QvdGhlbWUtY2hhbGsvZGFyay9jc3MtdmFycy5jc3MnXS5tYXAoKHN0eWxlKSA9PiB7XG4gICAgcmV0dXJuIG5ldyBQcm9taXNlKChyZXNvbHZlLCByZWplY3QpID0+IHtcbiAgICAgIGNvbnN0IGxpbmsgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdsaW5rJylcbiAgICAgIGxpbmsucmVsID0gJ3N0eWxlc2hlZXQnXG4gICAgICBsaW5rLmhyZWYgPSBzdHlsZVxuICAgICAgbGluay5hZGRFdmVudExpc3RlbmVyKCdsb2FkJywgcmVzb2x2ZSlcbiAgICAgIGxpbmsuYWRkRXZlbnRMaXN0ZW5lcignZXJyb3InLCByZWplY3QpXG4gICAgICBkb2N1bWVudC5ib2R5LmFwcGVuZChsaW5rKVxuICAgIH0pXG4gIH0pXG4gIHJldHVybiBQcm9taXNlLmFsbFNldHRsZWQoc3R5bGVzKVxufVxuIiwidHNjb25maWcuanNvbiI6IntcbiAgXCJjb21waWxlck9wdGlvbnNcIjoge1xuICAgIFwidGFyZ2V0XCI6IFwiRVNOZXh0XCIsXG4gICAgXCJqc3hcIjogXCJwcmVzZXJ2ZVwiLFxuICAgIFwibW9kdWxlXCI6IFwiRVNOZXh0XCIsXG4gICAgXCJtb2R1bGVSZXNvbHV0aW9uXCI6IFwiQnVuZGxlclwiLFxuICAgIFwidHlwZXNcIjogW1wiZWxlbWVudC1wbHVzL2dsb2JhbC5kLnRzXCJdLFxuICAgIFwiYWxsb3dJbXBvcnRpbmdUc0V4dGVuc2lvbnNcIjogdHJ1ZSxcbiAgICBcImFsbG93SnNcIjogdHJ1ZSxcbiAgICBcImNoZWNrSnNcIjogdHJ1ZVxuICB9LFxuICBcInZ1ZUNvbXBpbGVyT3B0aW9uc1wiOiB7XG4gICAgXCJ0YXJnZXRcIjogMy4zXG4gIH1cbn1cbiIsIlBsYXlncm91bmRNYWluLnZ1ZSI6IjxzY3JpcHQgc2V0dXA+XG5pbXBvcnQgQXBwIGZyb20gJy4vQXBwLnZ1ZSdcbmltcG9ydCB7IHNldHVwRWxlbWVudFBsdXMgfSBmcm9tICcuL2VsZW1lbnQtcGx1cy5qcydcbnNldHVwRWxlbWVudFBsdXMoKVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPEFwcCAvPlxuPC90ZW1wbGF0ZT5cbiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHtcbiAgICBcInZ1ZVwiOiBcImh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vQHZ1ZS9ydW50aW1lLWRvbUBsYXRlc3QvZGlzdC9ydW50aW1lLWRvbS5lc20tYnJvd3Nlci5qc1wiLFxuICAgIFwiQHZ1ZS9zaGFyZWRcIjogXCJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL0B2dWUvc2hhcmVkQGxhdGVzdC9kaXN0L3NoYXJlZC5lc20tYnVuZGxlci5qc1wiLFxuICAgIFwiZWxlbWVudC1wbHVzXCI6IFwiaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9lbGVtZW50LXBsdXNAbGF0ZXN0L2Rpc3QvaW5kZXguZnVsbC5taW4ubWpzXCIsXG4gICAgXCJlbGVtZW50LXBsdXMvXCI6IFwiaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9lbGVtZW50LXBsdXNAbGF0ZXN0L1wiLFxuICAgIFwiQGVsZW1lbnQtcGx1cy9pY29ucy12dWVcIjogXCJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL0BlbGVtZW50LXBsdXMvaWNvbnMtdnVlQDIvZGlzdC9pbmRleC5taW4uanNcIlxuICB9LFxuICBcInNjb3Blc1wiOiB7fVxufSIsIkVsQWZmaXhGaXhlZC52dWUiOiI8dGVtcGxhdGU+XHJcbiAgPGRpdiBjbGFzcz1cInJlbGF0aXZlXCI+XHJcbiAgICA8IS0tIOWOn+WniyBhZmZpeCAtLT5cclxuICAgIDxlbC1hZmZpeCByZWY9XCJhZmZpeFJlZlwiIHYtYmluZD1cInByb3BzXCIgOmNsYXNzPVwieyAnYWZmaXgtZml4ZWQtaGlkZGVuJzogZml4ZWQgfVwiIEBjaGFuZ2U9XCJvbkNoYW5nZVwiPlxyXG4gICAgICA8c2xvdD48L3Nsb3Q+XHJcbiAgICA8L2VsLWFmZml4PlxyXG5cclxuICAgIDwhLS0g6K6h566X55qEIGFmZml4IC0tPlxyXG4gICAgPGRpdiB2LWlmPVwiZml4ZWRcIiA6c3R5bGU9XCJtYW51YWxTdHlsZVwiIGNsYXNzPVwiZWwtYWZmaXgtLWZpeGVkXCI+XHJcbiAgICAgIDxzbG90Pjwvc2xvdD5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L3RlbXBsYXRlPlxyXG5cclxuPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cclxuaW1wb3J0IHsgbmV4dFRpY2ssIG9uQmVmb3JlVW5tb3VudCwgcmVmIH0gZnJvbSBcInZ1ZVwiO1xyXG5pbXBvcnQgeyBFbEFmZml4IH0gZnJvbSBcImVsZW1lbnQtcGx1c1wiO1xyXG5cclxuZnVuY3Rpb24gaXNDb250YWluaW5nQmxvY2soZWxlbWVudDogRWxlbWVudCk6IGJvb2xlYW4ge1xyXG4gIGNvbnN0IGNzcyA9IGdldENvbXB1dGVkU3R5bGUoZWxlbWVudCk7XHJcbiAgcmV0dXJuIChcclxuICAgIGNzcy50cmFuc2Zvcm0gIT09IFwibm9uZVwiIHx8XHJcbiAgICBjc3MucGVyc3BlY3RpdmUgIT09IFwibm9uZVwiIHx8XHJcbiAgICAoY3NzLmNvbnRhaW5lclR5cGUgPyBjc3MuY29udGFpbmVyVHlwZSAhPT0gXCJub3JtYWxcIiA6IGZhbHNlKSB8fFxyXG4gICAgKGNzcy5iYWNrZHJvcEZpbHRlciA/IGNzcy5iYWNrZHJvcEZpbHRlciAhPT0gXCJub25lXCIgOiBmYWxzZSkgfHxcclxuICAgIChjc3MuZmlsdGVyID8gY3NzLmZpbHRlciAhPT0gXCJub25lXCIgOiBmYWxzZSkgfHxcclxuICAgIFtcInRyYW5zZm9ybVwiLCBcInBlcnNwZWN0aXZlXCIsIFwiZmlsdGVyXCJdLnNvbWUoKHYpID0+IChjc3Mud2lsbENoYW5nZSB8fCBcIlwiKS5pbmNsdWRlcyh2KSkgfHxcclxuICAgIFtcInBhaW50XCIsIFwibGF5b3V0XCIsIFwic3RyaWN0XCIsIFwiY29udGVudFwiXS5zb21lKCh2KSA9PiAoY3NzLmNvbnRhaW4gfHwgXCJcIikuaW5jbHVkZXModikpXHJcbiAgKTtcclxufVxyXG5cclxuZnVuY3Rpb24gZ2V0Q29udGFpbmluZ0Jsb2NrKGVsZW1lbnQ6IEVsZW1lbnQpIHtcclxuICBsZXQgbm9kZSA9IGVsZW1lbnQucGFyZW50RWxlbWVudDtcclxuICB3aGlsZSAobm9kZSkge1xyXG4gICAgaWYgKGlzQ29udGFpbmluZ0Jsb2NrKG5vZGUpKSByZXR1cm4gbm9kZTtcclxuICAgIG5vZGUgPSBub2RlLnBhcmVudEVsZW1lbnQ7XHJcbiAgfVxyXG4gIHJldHVybiBudWxsO1xyXG59XHJcblxyXG4vLyDpgI/kvKAgcHJvcHNcclxuY29uc3QgcHJvcHMgPSBkZWZpbmVQcm9wczx7XHJcbiAgb2Zmc2V0PzogbnVtYmVyO1xyXG4gIHBvc2l0aW9uPzogXCJ0b3BcIiB8IFwiYm90dG9tXCI7XHJcbiAgdGFyZ2V0Pzogc3RyaW5nO1xyXG4gIHpJbmRleD86IG51bWJlcjtcclxufT4oKTtcclxuXHJcbmNvbnN0IGVtaXQgPSBkZWZpbmVFbWl0czx7XHJcbiAgKGU6IFwiY2hhbmdlXCIsIGZpeGVkOiBib29sZWFuKTogdm9pZDtcclxuICAoZTogXCJzY3JvbGxcIiwgcGFyYW06IHsgc2Nyb2xsVG9wOiBudW1iZXI7IGZpeGVkOiBib29sZWFuIH0pOiB2b2lkO1xyXG59PigpO1xyXG5cclxuY29uc3QgYWZmaXhSZWYgPSByZWY8SW5zdGFuY2VUeXBlPHR5cGVvZiBFbEFmZml4Pj4oKTtcclxuY29uc3QgZml4ZWQgPSByZWYoZmFsc2UpO1xyXG5cclxuLy8g5oiR5Lus6Ieq5bex5o6n5Yi255qE5qC35byPXHJcbmNvbnN0IG1hbnVhbFN0eWxlID0gcmVmPFJlY29yZDxzdHJpbmcsIHN0cmluZz4+KHt9KTtcclxuXHJcbi8vIOebkeWQrCBhZmZpeCDnmoTliIfmjaLkuovku7ZcclxuZnVuY3Rpb24gb25DaGFuZ2UodmFsOiBib29sZWFuKSB7XHJcbiAgZml4ZWQudmFsdWUgPSB2YWw7XHJcbiAgZW1pdChcImNoYW5nZVwiLCB2YWwpO1xyXG5cclxuICBpZiAodmFsKSB7XHJcbiAgICBuZXh0VGljayh1cGRhdGVQb3NpdGlvbik7XHJcbiAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcihcInNjcm9sbFwiLCB1cGRhdGVQb3NpdGlvbiwgdHJ1ZSk7XHJcbiAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcihcInJlc2l6ZVwiLCB1cGRhdGVQb3NpdGlvbik7XHJcbiAgfSBlbHNlIHtcclxuICAgIG1hbnVhbFN0eWxlLnZhbHVlID0ge307XHJcbiAgICB3aW5kb3cucmVtb3ZlRXZlbnRMaXN0ZW5lcihcInNjcm9sbFwiLCB1cGRhdGVQb3NpdGlvbiwgdHJ1ZSk7XHJcbiAgICB3aW5kb3cucmVtb3ZlRXZlbnRMaXN0ZW5lcihcInJlc2l6ZVwiLCB1cGRhdGVQb3NpdGlvbik7XHJcbiAgfVxyXG59XHJcbmZ1bmN0aW9uIHVwZGF0ZVBvc2l0aW9uKCkge1xyXG4gIGNvbnN0IGFmZml4RWwgPSBhZmZpeFJlZi52YWx1ZT8uJGVsIGFzIEhUTUxFbGVtZW50O1xyXG4gIGlmICghYWZmaXhFbCkgcmV0dXJuO1xyXG5cclxuICBjb25zdCBmaXhlZEVsID0gYWZmaXhFbC5xdWVyeVNlbGVjdG9yKFwiLmVsLWFmZml4LS1maXhlZFwiKSBhcyBIVE1MRWxlbWVudDtcclxuICBpZiAoIWZpeGVkRWwpIHJldHVybjtcclxuXHJcbiAgY29uc3QgcmVjdCA9IGZpeGVkRWwuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XHJcbiAgY29uc3QgY29udGFpbmluZyA9IGdldENvbnRhaW5pbmdCbG9jayhhZmZpeEVsKSBhcyBIVE1MRWxlbWVudCB8IG51bGw7XHJcbiAgY29uc3QgZGVzaXJlZFRvcCA9IChwcm9wcy5vZmZzZXQgPz8gMCkgYXMgbnVtYmVyO1xyXG5cclxuICBjb25zdCBjb250YWluaW5nUmVjdCA9IGNvbnRhaW5pbmcgPyBjb250YWluaW5nLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpIDogeyB0b3A6IDAsIGxlZnQ6IDAgfTtcclxuXHJcbiAgLy8g5oqK5oiR5LusIFwi5oOz6KaB55qEIHRvcCAo5LulIHZpZXdwb3J0IOS4uuWfuuWHhn1cIiDlj5jmjaLliLDljIXlkKvlnZflnZDmoIfns7tcclxuICBsZXQgZmluYWxUb3AgPSBkZXNpcmVkVG9wIC0gY29udGFpbmluZ1JlY3QudG9wO1xyXG5cclxuICAvLyDlpoLmnpzmnIkgdGFyZ2V0OiDmioogdGFyZ2V0IOeahCBib3R0b20g5Lmf6L2s5o2i5Yiw5ZCM5LiA5Z2Q5qCH57O75p2l6ZmQ5Yi2IGZpbmFsVG9wXHJcbiAgaWYgKHByb3BzLnRhcmdldCkge1xyXG4gICAgY29uc3QgdGFyZ2V0RWwgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKHByb3BzLnRhcmdldCkgYXMgSFRNTEVsZW1lbnQgfCBudWxsO1xyXG4gICAgaWYgKHRhcmdldEVsKSB7XHJcbiAgICAgIGNvbnN0IHRhcmdldFJlY3QgPSB0YXJnZXRFbC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcclxuICAgICAgY29uc3QgZml4ZWRIZWlnaHQgPSByZWN0LmhlaWdodDtcclxuICAgICAgLy8g5YeP5Y67IGNvbnRhaW5pbmdSZWN0LnRvcCwg5oqK5Lik6ICF5pS+5Yiw5ZCM5LiA5Z2Q5qCH57O76YeMXHJcbiAgICAgIGNvbnN0IG1heFRvcCA9IHRhcmdldFJlY3QuYm90dG9tIC0gZml4ZWRIZWlnaHQgLSBjb250YWluaW5nUmVjdC50b3A7XHJcbiAgICAgIGZpbmFsVG9wID0gTWF0aC5taW4oZmluYWxUb3AsIG1heFRvcCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICAvLyBsZWZ0IOS5n+mcgOimgeWBmuebuOWQjOWdkOagh+ezu+WPmOaNojogcmVjdC5sZWZ0ICh2aWV3cG9ydCkgLT4gcmVjdC5sZWZ0IC0gY29udGFpbmluZy5sZWZ0ICjljIXlkKvlnZflnZDmoIcpXHJcbiAgY29uc3QgZmluYWxMZWZ0ID0gcmVjdC5sZWZ0IC0gY29udGFpbmluZ1JlY3QubGVmdDtcclxuXHJcbiAgbWFudWFsU3R5bGUudmFsdWUgPSB7XHJcbiAgICBwb3NpdGlvbjogXCJmaXhlZFwiLFxyXG4gICAgdG9wOiBgJHtmaW5hbFRvcH1weGAsXHJcbiAgICBsZWZ0OiBgJHtmaW5hbExlZnR9cHhgLFxyXG4gICAgd2lkdGg6IGAke3JlY3Qud2lkdGh9cHhgLFxyXG4gICAgaGVpZ2h0OiBgJHtyZWN0LmhlaWdodH1weGAsXHJcbiAgICB6SW5kZXg6IFN0cmluZyhwcm9wcy56SW5kZXggPz8gMTAwMCksXHJcbiAgfTtcclxufVxyXG5cclxub25CZWZvcmVVbm1vdW50KCgpID0+IHtcclxuICB3aW5kb3cucmVtb3ZlRXZlbnRMaXN0ZW5lcihcInNjcm9sbFwiLCB1cGRhdGVQb3NpdGlvbiwgdHJ1ZSk7XHJcbiAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoXCJyZXNpemVcIiwgdXBkYXRlUG9zaXRpb24pO1xyXG59KTtcclxuPC9zY3JpcHQ+XHJcblxyXG48c3R5bGUgc2NvcGVkPlxyXG4vKlxyXG4qIOmakOiXj+m7mOiupOeahCBlbC1hZmZpeFxyXG4qIOS4jeS9v+eUqCB2LXNob3c9XCJmaXhlZFwi5piv5Zug5Li6di1zaG935Lya5pS55Y+YZWwtYWZmaXjnmoTluIPlsYDmoJHvvIzkuI3mlrnkvr/orqHnrpd0b3BcclxuKi9cclxuLmFmZml4LWZpeGVkLWhpZGRlbiB7XHJcbiAgb3BhY2l0eTogMDtcclxuICBwb2ludGVyLWV2ZW50czogbm9uZTtcclxuICB1c2VyLXNlbGVjdDogbm9uZTtcclxufVxyXG48L3N0eWxlPlxyXG4iLCJfbyI6e319
Bug Type:
ComponentEnvironment
3.5.212.11.3firefox 143.0.1ViteReproduction
Related Component
el-affixReproduction Link
Element Plus Playground
Steps to reproduce
最小复现环境的链接中，取消最后一行注释，也就是加上
backdrop-filter: blur(1px);样式后，滚动样式不生效。非safari的主流游览器基本都有这个bugIn the minimal reproduction environment, if you uncomment the last line, that is, add the style backdrop-filter: blur(1px);, the scrolling style will no longer work. This bug occurs in almost all mainstream browsers except Safari.
What is Expected?
el-affix 按期望固定
What is actually happening?
el-affix 被外层div带着移动
Additional comments
Because my English is not good, all translations are from GPT.
问题产生以及修复方案：
Problem and Fix:
原因：backdrop-filter / transform / will-change 这些都会把某个祖先变成 fixed 的 containing block，是浏览器的渲染规则。为了兼容父元素的这些css样式，此处固钉内部的top属性必须手动计算。
Cause: Properties such as backdrop-filter, transform, and will-change will turn an ancestor element into the containing block for
position: fixed. This is a browser rendering rule. To be compatible with these CSS properties on parent elements, the top property inside the affix component must be calculated manually.解决方法：使用
getBoundingClientRect()手动计算top属性即可。Solution: Use getBoundingClientRect() to manually calculate the top value.
已修复了问题的demo：
Demo with the issue fixed: