Inconsistent behavior for iOS and Android

[conilas]

Hi there!

I really liked the lib's idea. Just saw it on twitter and already am trying to use it!

But I've found an issue (or undocumented behavior, maybe) which is the following:

I have a class (.deviceList) in my CSS. Then. I have, say, 10 elements listed with that same class, one beneath the other (I'll attach an image).

Then, if I do something like:

  shiny('.deviceList',{
    // type of shiny to render,
    // 'background', 'border', or 'text'
    type: 'background',
    gradient: {

        // type of gradient
        // 'linear' or 'radial'
        type: 'radial',

        // angle of gradient when type is linear
        angle: '110deg',

        // flip axis movement
        flip: {
            x: true,
            y: true
        },

        // colors to use
        colors: [
            // offset, color, opacity
            // ! don't pass rgba or hsla colors, supply the opacity seperately
            [0, '#fff', 0.5], // white at 0%
            [0.5, '#000000', 1], // to fully transparent white at 100%
        ]

    },

    // optional pattern fill
    pattern: {
        type: 'noise', // only 'noise' for now
        opacity: .5
    }

On Android, each of those cards will have a radial effect.

On iOS, I have one radial effect spread through all the cards.

On iOS, whenever I move the screen, (i'll call it an "effect ball") the effect ball will go from one card to the other; on Android, each card has one effect ball!

I don't really know if this is some expected behavior or if it is a bug. Just wanted to let the team know!

Iphone

Android

[rikschennink]

Hi,

The library has not been tested on Android yet, hence the bugs and differences. Hope to receive a test device soon so I can sync things up.

[conilas]

Oh! That's good, then, that it already works for Android! hehe!!

Opinionated: I really preferred the android way of adding a shinny-style to each card that had the specified class. Lol.

I mean, iOS way is good too, but don't you think it is better to have one "effect ball" for each element?

[rikschennink]

I'm considering adding a gradient-position: element/page option to switch between the two options. If you want to sync up multiple elements the page wide version looks nicer but having control at element level might it possible to for instance create a diamond effect.