[bug] Slider voor achtergrond beweegt niet soepel mee

[BtM909]

Er zijn nieuwe knopjes gekomen voor o.a. Achtergrond.


(onderste rij)

1. Elke pagina
2. Tweakers.net
3. De slider voor achtergrond werkt niet soepel.
- Doe maar drag en drop rechts (buiten het kader).
- Resultaat: slider is niet helemaal op donker.
- Vanaf dat moment slide ie ook niet meer goed (zeg maar helemaal niet) naar bijv. links.
- Klikken op schalen werkt wel goed.

4. Elke browser
5. nvt
6. Win7

[ Voor 3% gewijzigd door BtM909 op 08-11-2012 16:44 ]

[_David_]

slider werkt hier prima

[ Voor 3% gewijzigd door _David_ op 08-11-2012 16:46 ]

[BtM909]

Werkwijze even beter uitgeschreven. Je hebt gelijk als je netjes binnen het vakje blijft dan kan je redelijk sliden. Een slider, qua usability, zou echter geen rekening moeten houden met mijn out of bound bewegingen

[JoostBaksteen]

Hmmm, ik kan dit niet reproduceren, hoe vaak ik de slider ook buiten de popup sleep, dan en er weer in sleep, klik e.d., hij blijft het gewoon doen

[ Voor 3% gewijzigd door JoostBaksteen op 08-11-2012 16:48 ]

[MueR]

Het komt voor als je, naast het horizontaal bewegen, ook verticaal beweegt.

[ Voor 4% gewijzigd door MueR op 08-11-2012 16:49 ]

[Sleepkever]

Kan het hier ook reproduceren als je er een beetje vaart achter zet kom je inderdaad rechts buiten het vlak zonder dat de slider helemaal op donker staat. (IE9, Win7 via RDP)

[BtM909]

Sleepkever schreef op donderdag 08 november 2012 @ 16:51:
Kan het hier ook reproduceren als je er een beetje vaart achter zet kom je inderdaad rechts buiten het vlak zonder dat de slider helemaal op donker staat. (IE9, Win7 via RDP)

Precies! Lekker onzorgvuldig sliden (zoals dat wel met de PW sliders of de dichtheid slider kan).

[JoostBaksteen]

De slider is denk ik bang voor mij

Een andere devver moet maar even kijken of hij dit nagebootst krijgt, zowel in W7 (chrome) als OSX (chrome, FF) krijg ik het niet voor elkaar.

[HyperioN]

Bij mij (W7, Chrome 23) werkt hij wel, maar de slider loopt wel flink achter mijn muiscursor aan tijdens slepen.
Ik zie dat jullie je javascript volledig zelf schrijven (lees: geen library gebruiken zoals jquery), en dat is natuurlijk te gek. Maar met bijv. jQuery.draggable is de performance veel smoother.

[ Voor 6% gewijzigd door HyperioN op 08-11-2012 17:40 ]

[BtM909]

JoostBaksteen schreef op donderdag 08 november 2012 @ 17:38:
De slider is denk ik bang voor mij

Een andere devver moet maar even kijken of hij dit nagebootst krijgt, zowel in W7 (chrome) als OSX (chrome, FF) krijg ik het niet voor elkaar.

Contacteer me desnoods maar via andere wegen... Kan het opnemen, via join.me, lync, NetMeeting eventueel ook laten zien

HyperioN schreef op donderdag 08 november 2012 @ 17:39:
Bij mij (W7, Chrome 23) werkt hij wel, maar de slider loopt wel flink achter mijn muiscursor aan tijdens slepen.
Ik zie dat jullie je javascript volledig zelf schrijven, en dat is natuurlijk te gek. Maar met bijv. jQuery.draggable is de performance veel smoother.

Weet je wel hoeveel JS daarvoor bij moet komen Als je kijkt naar de sliders in PW, dan ben ik ervan overtuigd dat die net zo goed, zo niet beter performen dan 't gedrocht dat draggable heet

[ Voor 41% gewijzigd door BtM909 op 08-11-2012 17:41 ]

[HyperioN]

BtM909 schreef op donderdag 08 november 2012 @ 17:40:
[...]

Weet je wel hoeveel JS daarvoor bij moet komen Als je kijkt naar de sliders in PW, dan ben ik ervan overtuigd dat die net zo goed, zo niet beter performen dan 't gedrocht dat draggable heet

Oh daar ben ik het absoluut mee eens hoor!
Maar de Pricewatch sliders doen het inderdaad wél erg goed. Waarom de achtergrondkleur-slider dan niet..?

[BtM909]

Ik denk dat het komt door het "introduceren" van de schalen (ticks) waar naar toe zou moeten worden gesnapt. (hopelijk een beetje duidelijk omschreven )

De pricewatch sliders zijn free-form, oftewel elke x pixels is een euro, maat, whatever.

[crisp]

Slider performance is heel erg afhankelijk van de plek op de pagina waar je deze gebruikt (binnen een floating of absoluut gepositioneerd element moet de browser vaak veel meer 'repaints' doen), en de taak die de slider moet uitvoeren. In het geval van de achtergrond-slider moet per 'tick' on-the-fly een nieuwe stylesheet worden aangemaakt, en deze moet door de browser weer gerendered en toegepast worden (ter vergelijking: de sliders in de pricewatch doen niets tijdens het sliden; pas aangekomen op de uiteindelijk positie wordt daar een actie uitgevoerd).

Uiteraard verschilt het dus ook uiteindelijk per browser en systeem wat de uiteindelijke performance is.

Een willekeurig ander slidervoorbeeld pakken welke in een demo natuurlijk helemaal geen taak hoeft uit te voeren is uiteindelijk appels met peren vergelijken.

Dat wil niet zeggen dat de sliders codetechnisch niet verbeterd kunnen worden; ik heb ze inmiddels alweer ongeveer 5 jaar geleden gemaakt en de code is nadien grotendeels ongewijzigd gebleven. Wellicht kan het gebruik van nieuwe technieken zoals requestAnimationFrame wel voor een soepelere ervaring zorgen

Verder moet je ook kijken naar de toepassing: in dit geval zal deze slider slechts een enkele keer gebruikt worden; ik denk niet dat mensen continue hun achtergrond wijzigen

[ Voor 14% gewijzigd door crisp op 08-11-2012 20:22 ]

[crisp]

Ik heb de slider ondertussen intern aangepast zodat deze nu ook gewoon lekker soepel is

Voor de techneuten onder ons: het is eigenlijk gewoon puur een kwestie van het opsplitsen van primaire animatie (de slider) en het verwerken van de actie. Als er een slideractie wordt begonnen wordt er ondertussen een 'background-render' timer gestart die elke 50 milliseconde kijkt naar de huidige waarde van de slider en vervolgens daar actie op uitvoert. Ondertussen vertraagd dat dan niet het sliden zelf meer

Komende week online