Flickering <input style="position: absolute"> in SVG foreignObject

[gregziegan]

My SSCCE is here:

module Main exposing (..)

import Html exposing (input)
import Html.Attributes exposing (style, value)
import Html.Events exposing (onInput)
import Svg exposing (svg, foreignObject)


model =
    ""


type Msg
    = Input String


update msg model =
    case msg of
        Input text ->
            text


view model =
    svg
        []
        [ foreignObject []
            [ input [ style [ ( "position", "absolute" ) ], onInput Input, value model ] []
            , input [ style [ ( "position", "fixed" ), ( "top", "50px" ) ], onInput Input, value model ] []
            ]
        ]


main =
    Html.beginnerProgram
        { model = model
        , update = update
        , view = view
        }

and hosted on Ellie here:

https://ellie-app.com/3jzStKbMF7Ba1/1

Platform

• Elm Version: 0.18
• OS: Mac
• Browser: Chrome
• OS & Browser: All latest versions

Extra Information

I emulated the same SSCCE "controlled input" behavior in React without running into the issue: https://codesandbox.io/s/17lq4WAZ

This may be related to this webkit bug: https://bugs.webkit.org/show_bug.cgi?id=71819

Other Browsers

I tried this on Firefox, no issues. Surprisingly on Safari: position: absolute is fine but position: fixed produces the same effect!

[process-bot]

Thanks for the issue! Make sure it satisfies this checklist. My human colleagues will appreciate it!

Here is what to expect next, and if anyone wants to comment, keep these things in mind.

[evancz]

Is it the same as this issue? What would fix this?

[evancz]

I wonder if the root cause is that we always use requestAnimationFrame. Can you run your code but hand modify the JS to no longer use requentAnimationFrame?

[gregziegan]

I tried changing the stepper to use setTimeout exclusively. No luck. I also tried different intervals.

What would fix this?

It was easy to work around by using the x and y attributes on the foreignObject.

I'm curious if the workaround is a limitation to anyone using foreignObject, but I can't think of any currently since x and y mimic the behavior of position: absolute and top and left