How to get Vega/Vega-Lite gradient to behave correctly when zoomed in - gradient

Question

I have created a graph with a gradient which is zoomable (see code below), but the gradient doesn't behave the way I'd like. When the user zooms in, the gradient effectively disappears. This effect is particularly pronounced if the data contains a big spike, and the user zooms into a different part of the data.
In my example, try changing the domain from [21,29] to [0,29] and you'll see what I mean. If the graph is fully zoomed-out [0,29], you can see the full gradient (white to green). When the graph is zoomed in [21,29], it also "zooms in" on the gradient, effectively making it disappear.
Is there a way to make the gradient be relative to the screen, so that the user continues to see the gradient regardless of the zoom?
I did try to convert the graph to Vega, and then try to scale the 0-1 gradient offset values based on the zoom, but it turned out rather complicated and messy. I'm wondering if I'm missing something, and if maybe there is a better way.
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Google's stock price over time.",
"data": {"url": "data/stocks.csv"},
"transform": [{"filter": "datum.symbol==='MSFT'"}],
"mark": {
"type": "area",
"clip": true,
"line": {"color": "darkgreen"},
"color": {
"x1": 1,
"y1": 1,
"x2": 1,
"y2": 0,
"gradient": "linear",
"stops": [
{"offset": 0, "color": "white"},
{"offset": 1, "color": "darkgreen"}
]
}
},
"encoding": {
"x": {"field": "date", "type": "temporal", "scale": {"domain": ["2006-1-1", "2007-1-1-"]}},
"y": {"field": "price", "type": "quantitative", "scale": {"domain": [21, 29]}}
}
}