241983 2022-06-24 13:56:20 -0700 CSS Relative Position Resetting Flex Container Position on Zoomed View 2023-09-06 13:45:15 -0700 1 1 1 Unclassified WebKit CSS Safari 15 Mac (Apple Silicon) Unspecified RESOLVED DUPLICATE 23113 InRadar P2 Major --- 1 sheinlinphyo webkit-unassigned sheinlinphyo simon.fraser webkit-bug-importer zalan oldest_to_newest 1878258 0 sheinlinphyo 2022-06-24 13:56:20 -0700 Set position to relative or absolute to flex container. Flex container is positioned relative to viewport like fixed in zoomed view. Sample with relative position (bug): https://raw.githubusercontent.com/Penguinlay/Penguinlay/29d8279978379b60405bd8d1d42f5468cdcf1312/data/images/metrics.svg Sample with static position (for comparison): https://raw.githubusercontent.com/Penguinlay/Penguinlay/29d8279978379b60405bd8d1d42f5468cdcf1312/data/images/metrics.svg For both samples above, try zoom in and out with command + and command -. You will see that the numbers badges are out of place in the buggy one. (Zooming using touchpad does not cause the bug.) The bug could be in the implementation of CSS, CSS for SVG or with how the browser paints the DOM elements, I am not sure. 1878639 1 webkit-bug-importer 2022-06-27 17:56:54 -0700 <rdar://problem/96025793> 1878648 2 simon.fraser 2022-06-27 19:10:18 -0700 Both your links are the same, but when I zoom I see the bug. Does this occur if it's not nested inside <foreignobject> in SVG? 1878666 3 sheinlinphyo 2022-06-27 20:45:34 -0700 (In reply to Simon Fraser (smfr) from comment #2) > Both your links are the same, but when I zoom I see the bug. > > Does this occur if it's not nested inside <foreignobject> in SVG? Oh, I am so sorry. Here is the working one. https://raw.githubusercontent.com/Penguinlay/Penguinlay/9fbe1cb6fbc83125a69c3e86ccf2f505641dd64b/data/images/metrics.svg The bug image (again) for reference. https://raw.githubusercontent.com/Penguinlay/Penguinlay/29d8279978379b60405bd8d1d42f5468cdcf1312/data/images/metrics.svg ## Reproduction I fixed the issue by resetting the position to static from relative. https://github.com/Penguinlay/Penguinlay/commit/29d8279978379b60405bd8d1d42f5468cdcf1312 Side by side comparison before and after resetting the position to static: https://github.com/Penguinlay/Penguinlay/commit/9fbe1cb6fbc83125a69c3e86ccf2f505641dd64b ## Bug I am not sure if it is limited to being nested inside <foreignobject>. I am gonna test it out now and let you know. But, I got a couple of clues I observe. 1. You will see via "start element selection" in inspect element menu that the selection highlight are at the correct place. Just the rendering is out of place. Hope this would be helpful in debugging. 2. This bug can be reproducible in WebView, mobile Safari and MacOS Safari regardless of the OS or iOS version (I tested with my sister's devices which are in latest stable while mine are in latest developer betas. 1878677 4 sheinlinphyo 2022-06-27 22:01:51 -0700 ## TL;DR The bug only happens inside <foreignobject>. ## Minimal Reproduction ```html <style> .container { align-items: center; background-color: lightblue; display: flex; flex-direction: column; height: 80px; width: 80px; } .item { position: relative; } </style> <div> <div class="container"> <div class="item">9</div> </div> </div> ``` This works fine. ```svg <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> <foreignObject x="0" y="0" width="100%" height="100%"> <style> .container { align-items: center; background-color: lightblue; display: flex; flex-direction: column; height: 80px; width: 80px; } .item { position: relative; } </style> <div xmlns="http://www.w3.org/2000/xhtml" xmlns:xlink="http://www.w3.org/2000/xlink"> <div class="container"> <div class="item">9</div> </div> </div> </foreignObject> </svg> ``` The is buggy whether xmlns and xmlns:xlink of div are of the year 1999 or 2000. 1975902 5 simon.fraser 2023-09-06 13:45:15 -0700 *** This bug has been marked as a duplicate of bug 23113 ***