mirror of
https://github.com/Sagit-chu/flvx.git
synced 2026-09-29 07:56:37 +08:00
fix(frontend): prevent font blur in sortable card components (#185)
Add backface-visibility: hidden and font-smoothing properties to SortableItem components in tunnel, forward, and node pages to prevent GPU subpixel rendering blur during drag operations. - tunnel.tsx: SortableItem wrapper anti-blur fix - forward.tsx: SortableCard wrapper anti-blur fix - node.tsx: SortableItem component anti-blur fix Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
@@ -1175,11 +1175,14 @@ export default function ForwardPage() {
|
||||
isDragging,
|
||||
} = useSortable({ id: forward.id });
|
||||
|
||||
const style = {
|
||||
const style: React.CSSProperties = {
|
||||
transform: transform ? CSS.Transform.toString(transform) : undefined,
|
||||
transition: isDragging ? undefined : transition || undefined,
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
willChange: "transform",
|
||||
backfaceVisibility: "hidden",
|
||||
WebkitFontSmoothing: "antialiased",
|
||||
MozOsxFontSmoothing: "grayscale",
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -129,11 +129,14 @@ const SortableItem = ({
|
||||
isDragging,
|
||||
} = useSortable({ id });
|
||||
|
||||
const style = {
|
||||
const style: React.CSSProperties = {
|
||||
transform: transform ? CSS.Transform.toString(transform) : undefined,
|
||||
transition: isDragging ? undefined : transition || undefined,
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
willChange: "transform",
|
||||
backfaceVisibility: "hidden",
|
||||
WebkitFontSmoothing: "antialiased",
|
||||
MozOsxFontSmoothing: "grayscale",
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -666,11 +666,14 @@ export default function TunnelPage() {
|
||||
isDragging,
|
||||
} = useSortable({ id });
|
||||
|
||||
const style = {
|
||||
const style: React.CSSProperties = {
|
||||
transform: transform ? CSS.Transform.toString(transform) : undefined,
|
||||
transition: isDragging ? undefined : transition || undefined,
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
willChange: "transform",
|
||||
backfaceVisibility: "hidden",
|
||||
WebkitFontSmoothing: "antialiased",
|
||||
MozOsxFontSmoothing: "grayscale",
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user