Skip to content

Commit a1b575f

Browse files
devvaannshdevvaannsh
committed
fix: scrollbar not appearing in live preview macos desktop
1 parent 52c55f8 commit a1b575f

1 file changed

Lines changed: 47 additions & 40 deletions

File tree

‎src/styles/brackets_scrollbars.less‎

Lines changed: 47 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
}
5252

5353
::-webkit-scrollbar-thumb {
54-
box-shadow: none;
54+
background-color: transparent;
5555
border: none;
5656
}
5757

@@ -67,7 +67,8 @@
6767
:hover::-webkit-scrollbar-thumb,
6868
:focus::-webkit-scrollbar-thumb {
6969
border-radius: 999px;
70-
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.6) inset;
70+
background-color: rgba(0, 0, 0, 0.6);
71+
background-clip: padding-box;
7172
border: 2px solid transparent;
7273
}
7374

@@ -96,13 +97,14 @@
9697
}
9798
&::-webkit-scrollbar-thumb {
9899
border-radius: 999px;
99-
box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.6) inset !important;
100+
background-color: rgba(0, 0, 0, 0.6) !important;
101+
background-clip: padding-box !important;
100102
border: 2px solid transparent !important;
101103
}
102104

103105
.dark & {
104106
&::-webkit-scrollbar-thumb {
105-
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3) inset !important;
107+
background-color: rgba(255, 255, 255, 0.3) !important;
106108
}
107109
}
108110
}
@@ -116,7 +118,8 @@
116118
}
117119
&::-webkit-scrollbar-thumb {
118120
border-radius: 999px;
119-
box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.3) inset !important;
121+
background-color: rgba(0, 0, 0, 0.3) !important;
122+
background-clip: padding-box !important;
120123
border: 2px solid transparent !important;
121124
}
122125

@@ -125,76 +128,79 @@
125128
background-color: @dark-bc-menu-bg !important;
126129
}
127130
&::-webkit-scrollbar-thumb {
128-
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3) inset !important;
131+
background-color: rgba(255, 255, 255, 0.3) !important;
129132
}
130133
}
131134
}
132135

133136
.platform-linux, .platform-mac {
134137
// Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js
138+
// Exclude iframes: WKWebView (Tauri macOS) doesn't render custom ::-webkit-scrollbar on
139+
// iframe elements correctly, causing invisible scrollbars. Native scrollbar renders instead.
135140

136-
::-webkit-scrollbar {
141+
:not(iframe)::-webkit-scrollbar {
137142
width: 12px;
138143
height: 12px;
139144
}
140145

141-
::-webkit-scrollbar-track:vertical {
146+
:not(iframe)::-webkit-scrollbar-track:vertical {
142147
margin: 0 0 8px 0;
143148
}
144149

145-
::-webkit-scrollbar-track:horizontal {
150+
:not(iframe)::-webkit-scrollbar-track:horizontal {
146151
margin: 0 8px 0 0;
147152
}
148153

149-
::-webkit-scrollbar-thumb {
154+
:not(iframe)::-webkit-scrollbar-thumb {
150155
border-radius: 999px;
151-
box-shadow: 0 0 0 5px @linux-scrollbar-thumb inset;
156+
background-color: @linux-scrollbar-thumb;
157+
background-clip: padding-box;
152158
border: 2px solid transparent;
153159
}
154160

155-
::-webkit-scrollbar-corner {
161+
:not(iframe)::-webkit-scrollbar-corner {
156162
background: none;
157163
}
158164

159-
::-webkit-scrollbar-thumb:window-inactive {
160-
box-shadow: 0 0 0 5px @linux-scrollbar-thumb-inactive inset;
165+
:not(iframe)::-webkit-scrollbar-thumb:window-inactive {
166+
background-color: @linux-scrollbar-thumb-inactive;
161167
}
162168
}
163169

164170
.platform-win {
165171
// Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js
166172

167-
::-webkit-scrollbar {
173+
:not(iframe)::-webkit-scrollbar {
168174
width: 12px;
169175
height: 12px;
170176
background-color: transparent;
171177
}
172178

173-
::-webkit-scrollbar:hover {
179+
:not(iframe)::-webkit-scrollbar:hover {
174180
background-color: @win-scrollbar-track;
175181
}
176182

177-
::-webkit-scrollbar-thumb {
178-
box-shadow: 0 0 0 12px @win-scrollbar-thumb inset;
183+
:not(iframe)::-webkit-scrollbar-thumb {
184+
background-color: @win-scrollbar-thumb;
179185
}
180186

181-
.dragging ::-webkit-scrollbar-thumb,
182-
::-webkit-scrollbar-thumb:hover,
183-
::-webkit-scrollbar-thumb:focus {
184-
box-shadow: 0 0 0 12px @win-scrollbar-thumb-hover inset;
187+
.dragging :not(iframe)::-webkit-scrollbar-thumb,
188+
:not(iframe)::-webkit-scrollbar-thumb:hover,
189+
:not(iframe)::-webkit-scrollbar-thumb:focus {
190+
background-color: @win-scrollbar-thumb-hover;
185191
}
186-
::-webkit-scrollbar-thumb:active {
187-
box-shadow: 0 0 0 12px @win-scrollbar-thumb-active inset;
192+
:not(iframe)::-webkit-scrollbar-thumb:active {
193+
background-color: @win-scrollbar-thumb-active;
188194
}
189195

190-
::-webkit-scrollbar-thumb:vertical {
196+
:not(iframe)::-webkit-scrollbar-thumb:vertical {
191197
min-height: 20px;
192198
}
193-
::-webkit-scrollbar-thumb:horizontal {
199+
:not(iframe)::-webkit-scrollbar-thumb:horizontal {
194200
min-width: 20px;
195201
}
196202

197-
::-webkit-scrollbar-corner {
203+
:not(iframe)::-webkit-scrollbar-corner {
198204
background: none;
199205
}
200206
}
@@ -215,23 +221,23 @@
215221

216222
// Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js
217223

218-
::-webkit-scrollbar {
224+
:not(iframe)::-webkit-scrollbar {
219225
background-color: transparent;
220226
}
221227

222-
::-webkit-scrollbar:hover {
228+
:not(iframe)::-webkit-scrollbar:hover {
223229
background-color: rgba(15, 15, 15, .5);
224230
}
225231

226-
::-webkit-scrollbar-thumb {
227-
box-shadow: 0 0 0 12px rgb(49, 49, 49) inset;
232+
:not(iframe)::-webkit-scrollbar-thumb {
233+
background-color: rgb(49, 49, 49);
228234
}
229-
::-webkit-scrollbar-thumb:hover,
230-
::-webkit-scrollbar-thumb:focus {
231-
box-shadow: 0 0 0 12px rgb(89, 89, 89) inset;
235+
:not(iframe)::-webkit-scrollbar-thumb:hover,
236+
:not(iframe)::-webkit-scrollbar-thumb:focus {
237+
background-color: rgb(89, 89, 89);
232238
}
233-
::-webkit-scrollbar-thumb:active {
234-
box-shadow: 0 0 0 12px rgb(169, 169, 169) inset;
239+
:not(iframe)::-webkit-scrollbar-thumb:active {
240+
background-color: rgb(169, 169, 169);
235241
}
236242
}
237243

@@ -241,12 +247,13 @@
241247
background-color: transparent;
242248
}
243249

244-
::-webkit-scrollbar-thumb {
245-
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.24) inset;
250+
:not(iframe)::-webkit-scrollbar-thumb {
251+
background-color: rgba(255, 255, 255, 0.24);
246252
}
247253

248-
::-webkit-scrollbar-thumb:window-inactive {
249-
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12) inset;
254+
:not(iframe)::-webkit-scrollbar-thumb:window-inactive {
255+
background-color: rgba(255, 255, 255, 0.12);
250256
}
251257
}
252258
}
259+

0 commit comments

Comments
 (0)