elm-ui

elm-ui copied to clipboard

We found a possible regression between version 1.1.7 and version 1.1.8, in Chrome and Firefox (and maybe IE11/Edge). Safari is ok:

https://lucamug.github.io/test/button-elm-ui-1.1.7.html

https://lucamug.github.io/test/button-elm-ui-1.1.8.html

This is the source code, compiled with 1.1.8: https://ellie-app.com/b4S2NHcvy6Ha1

A regression is also happening in IE11 and we pin-pointed it to the commit 42d0dae, maybe related to the change from "flex-basis: auto" to "flex-basis: 0px".

We don't have example for IE11 but they seems related.

This is a smaller example: https://ellie-app.com/b4VS3nd8ZRJa1

module Main exposing (main)

import Element exposing (..)
import Element.Background as Background
import Html

main : Html.Html msg
main =
    layout
        []
    <|
        column [ spacing 20 ]
            [ el
                [ Background.color <| rgb 1 0.5 1
                , padding 20
                , clip
                ]
              <|
                text "This is a test"
            ]

Adding .s.c > .s {flex-basis: auto} seems reverting the regression.

Examples:

Without the fix:

https://ellie-app.com/b4VS3nd8ZRJa1

With the fix:

https://ellie-app.com/f2vxN4rG9sPa1

@lucamug This "fix" actually introduces an regression as well.

Currently, height fill will be constrained to the actual window height, but with this "fix", the element will inherit the full height of all the children element and the height fill element will stretch past the window viewport and cause scrolling.

This is relevant when making an app-like experience where the layout and UI elements are constrained to the window height and width with a scrollable element within (like a chat app where you can scroll through the messages, but every other UI element is static).