nolanlawson / emoji-picker-element

A lightweight emoji picker for the modern web
https://nolanlawson.github.io/emoji-picker-element/
Apache License 2.0
1.49k stars 85 forks source link

fix: use `scrollbar-gutter: stable` #433

Closed nolanlawson closed 3 months ago

nolanlawson commented 3 months ago

Adapted from #427.

Uses scrollbar-gutter: stable so that the emoji don't shift around while searching. It's also a way simpler way to line up the favorites panel with the main grid.

Screenshot from 2024-08-04 15-35-03

Screenshot from 2024-08-04 15-35-18

Safari still doesn't support this, but it's behind a flag, and plus this is kind of a progressive enhancement, especially since the effect if you don't have it is just that the favorites panel doesn't line up nicely. Plus it only affects WebKit users who have perma-scrollbars enabled, which isn't the case for Safari on Mac or iOS or on Epiphany on Linux.

github-actions[bot] commented 3 months ago

📊 Tachometer Benchmark Results

Summary

benchmark-total

  • emoji-picker-element-change-tab: slower ❌ 0% - 5% (0.09ms - 1.73ms)
    this-change vs tip-of-tree
  • emoji-picker-element-database-interactions: unsure 🔍 -2% - +4% (-2.45ms - +4.40ms)
    this-change vs tip-of-tree
  • emoji-picker-element-first-load: unsure 🔍 -4% - +4% (-1.76ms - +1.63ms)
    this-change vs tip-of-tree
  • emoji-picker-element-second-load: unsure 🔍 -7% - +4% (-2.40ms - +1.60ms)
    this-change vs tip-of-tree

Results

emoji-picker-element-change-tab
  • Browser: chrome-headless 127.0.6533.72
  • Sample size: 50
  • Built by: Benchmarks #455
  • Commit: f097c68
VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
this-change
34.30ms - 35.67ms-slower ❌
0% - 5%
0.09ms - 1.73ms
tip-of-tree
tip-of-tree
33.62ms - 34.53msfaster ✔
0% - 5%
0.09ms - 1.73ms
-
emoji-picker-element-database-interactions
  • Browser: chrome-headless 127.0.6533.72
  • Sample size: 50
  • Built by: Benchmarks #455
  • Commit: f097c68
VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
this-change
97.53ms - 102.49ms-unsure 🔍
-2% - +4%
-2.45ms - +4.40ms
tip-of-tree
tip-of-tree
96.67ms - 101.40msunsure 🔍
-4% - +2%
-4.40ms - +2.45ms
-
emoji-picker-element-first-load
  • Browser: chrome-headless 127.0.6533.72
  • Sample size: 50
  • Built by: Benchmarks #455
  • Commit: f097c68
VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
this-change
44.76ms - 47.53ms-unsure 🔍
-4% - +4%
-1.76ms - +1.63ms
tip-of-tree
tip-of-tree
45.23ms - 47.19msunsure 🔍
-4% - +4%
-1.63ms - +1.76ms
-
emoji-picker-element-second-load
  • Browser: chrome-headless 127.0.6533.72
  • Sample size: 50
  • Built by: Benchmarks #455
  • Commit: f097c68
VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
this-change
33.64ms - 36.44ms-unsure 🔍
-7% - +4%
-2.40ms - +1.60ms
tip-of-tree
tip-of-tree
34.00ms - 36.87msunsure 🔍
-5% - +7%
-1.60ms - +2.40ms
-

tachometer-reporter-action v2 for Benchmarks

github-actions[bot] commented 3 months ago

Size Change: -143 B (-0.39%)

Total Size: 36.3 kB

Filename Size Change
./bundle.js 36.3 kB -143 B (-0.39%)

compressed-size-action