Laggy position: fixed op mobile (maar niet op Tweakers)

[BramVroy]

Ik heb een vreemd probleem bij een nieuw design waar ik aan werk. Ik heb een simpele "back to top" knop die rechts onder fixed staat (eentje zoals Tweakers ook heeft). Maar op mijn telefoon is hij "laggy", d.w.z hij schokt wat. Alsof hij moeite heeft om telkens opnieuw z'n positie te bepalen. Ik dacht eerst dat het aan m'n telefoon of browser lag (Lumia 920, IE Mobile), maar de back-to-top van Tweakers.net werkt er wel smooth op.

Ik heb naar de broncode van tweakers gekeken, en dat lijkt me een gewone position fixed te zijn. De belangrijke CSS van mijn knop:

code:

position: fixed;
right: 12px;
bottom: 12px;
padding: 8px;
background: rgba(68,68,68,0.88);
color: white;
z-index: 100;
transform: translateZ(0); /* geprobeerd om hardware accel te triggeren, geen baat */

Een voorbeeld vind je hier (wip, maar feedback is desalniettemin welkom).

Ik heb enkel getest op mijn smartphone, dus kan niet zeggen hoe het op Android/iOS is. Kunnen mensen met zo'n apparaat me ook even laten weten of het probleem bij hen ook voorkomt? (Voor testdoeleinden heb ik m'n JS file niet geladen, dus de back-to-top werkt waarschijnlijk niet zoals verwacht. Het gaat 'em dan ook om de weergave ervan en niet diens functionaliteit.)

[ Voor 7% gewijzigd door BramVroy op 28-01-2015 14:21 ]

[Tim_bots]

Eventjes getest op mijn telefoon (nexus 5, android 5.0.1, chrome) en daar blijft hij rock-solid staan.

Helaas kan ik je niet verder helpen met je probleem.

[TimothyW]

getest op LG G2 met stock browser en met chrome, eveneens geen problemen.

[BramVroy]

Bedankt allebei. Zeer vreemd wel. Ik kan niet testen of het aan IE Mobile ligt of aan mijn mogelijk tragere smartphone. (Hoewel een 920 echt niet zo traag is.)

Iemand met een recentere/meer high-end Windows Phone die dit eens kan testen?

[Raem]

Kan best een IE mobile probleem zijn. Op mijn WP7 werkt position:fixed helemaal niet.

[HansvDr]

Op mijn 930,schokt hij een beetje. Die van tweakers doet het wel perfect.

[Zoefff]

Grote kans dat het met de alpha-transparantie in de achtergrond te maken heeft. Haal die eens weg?

[BramVroy]

Zoefff schreef op donderdag 29 januari 2015 @ 10:29:
Grote kans dat het met de alpha-transparantie in de achtergrond te maken heeft. Haal die eens weg?

Leek me ook de meest voor de hand liggende oplossing, maar niets bleek minder waar: na heel wat te testen met andere HTML bleek het de border-radius te zijn. Wie had dat gedacht. Als ik die eruit haal, en de rest laat staan, dan gaat hij wel gewoon vlot. Ik dénk dat bij elke positieverandering hij de randen opnieuw moet painten en dat het daarom schokt.

Bedankt voor de feedback in ieder geval! Remember kids, IE is still a weird f*cker.

Zoas hier staat: http://www.html5rocks.com...h-performance-animations/

If you animate any of the above properties the element(s) affected are repainted, and the layers they belong to are uploaded to the GPU. On mobile devices this is particularly expensive because CPUs are significantly less powerful than their desktop counterparts, meaning that the painting work takes longer; and the bandwidth between the CPU and GPU is limited, so texture uploads take a long time.

[ Voor 27% gewijzigd door BramVroy op 29-01-2015 16:58 ]

[webdavid]

Ik vind het er mooi uitzien. Alleen zou ik de opacity van de plaatjes omdraaien. Dus pas doorzichtig als je je muis erop houd.

[HansvDr]

Hij is nu ook op de 930 prima.

[BramVroy]

HansvDr schreef op donderdag 29 januari 2015 @ 18:35:
Hij is nu ook op de 930 prima.

Thanks om het nog even te checken!

webdavid schreef op donderdag 29 januari 2015 @ 17:07:
Ik vind het er mooi uitzien. Alleen zou ik de opacity van de plaatjes omdraaien. Dus pas doorzichtig als je je muis erop houd.

Ik zal het zeker eens bekijken, bedankt voor de feedback!