Bug 241983 – CSS Relative Position Resetting Flex Container Position on Zoomed View

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: CSS

[Shein Lin Phyo]

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.

[Radar WebKit Bug Importer]

<rdar://problem/96025793>

[Simon Fraser (smfr)]

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?

[Shein Lin Phyo]

(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.

[Shein Lin Phyo]

## 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.

[Simon Fraser (smfr)]

*** This bug has been marked as a duplicate of bug 23113 ***